Vue Elements过渡路由器

时间:2019-05-02 13:39:17

标签: vue.js transition

我正在尝试使用淡入淡出效果对页面背景进行动画处理,并在激活和退出路由器页面时对元素进行延迟动画处理。

 <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>

我将延迟类用于序列动画,但是当我离开页面时动画不起作用。回视图应像淡入淡出效果一样进行动画处理,元素中的动画应从右向左移动。

0 个答案:

没有答案