Vue Elements Transition Router

Question

Я пытаюсь анимировать фон страницы с эффектом затухания и анимировать элементы с задержкой, когда страница маршрутизатора активна и уходит.

 <div class="home">
    <transition name="content-animation" enter-active-class="animated fadeInRight" leave-active-class="animated fadeOutLeft" appear>
      <div class="content-area">
        <h2 class="animated fadeInRight delay-01s">LOREM</h2>
        <h1 class="animated fadeInRight delay-01-1s">Lorem ipsum dolor site amed</h1>
        <p class="animated fadeInRight delay-01-2s">We provide bespoke branding solutions and design.
        </p>
        <router-link to="/capabilities" class="animated fadeInRight delay-01-3s">
          <img src="../assets/img/arrow.png" alt>
        </router-link>
      </div>
    </transition>
 </div>

Я использовал класс задержки для анимации последовательности, но когда я покидаю страницу, анимация неза работой.Маршрутизатор должен анимироваться, как эффект затухания, элементы должны анимироваться справа и слева.