Vue_同时使用过渡和动画

刺骨的言语ヽ痛彻心扉 2022-05-20 22:11 201阅读 0赞

在上一节我们用animate动画库，在刷新页面时没有动画

如何解决第一次就显示动画内容呢？

在transform 上加上appear 和appear-active-class

<transition name='fade'
           appear
           enter-active-class='animated swing' 
           leave-active-class='animated flash'
           appear-active-class='animated swing'>
       <div v-if="cssanimate">hello css animate</div>
    </transition>
       <button @click='cssclick'>css动画</button>

这样在第一次加载时就会显示动画。  
事实上，animate动画提供的是什么动画呢？就是@keyframes的这种CSS3的动画效果。  
我们也可以在动画加上transition 过渡动画效果。

<transition 
         name='fade'
         appear
         type='transition'
         enter-active-class='animated swing fade2-enter-active' 
         leave-active-class='animated flash fade2-leave-active'
         appear-active-class='animated swing'>
      <div v-if="cssanimate3">hello css animate3</div>
    </transition>
      <button @click='cssclick3'>css动画3</button>

在CSS中定义过渡动画：

transition加上type=‘transition’的原因是，transition的过渡时长可能是3s是自己定义的，但是animate默认的过渡时长为1s，所以会有冲突，type的作用是以谁的时长为总时长  
当然我们也可以自己自定义时长。

<transition 
         name='fade'
         appear
         :duration ="5000"
        // :duration ="{enter:5000,leave:10000}"
        // 更复杂的定义时长
         enter-active-class='animated swing fade2-enter-active' 
         leave-active-class='animated flash fade2-leave-active'
         appear-active-class='animated swing'>
      <div v-if="cssanimate3">hello css animate3</div>
    </transition>
      <button @click='cssclick3'>css动画3</button>

如此便实现动画和过渡的效果。