Vue_同时使用过渡和动画

在上一节我们用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中定义过渡动画:

<style>
.fade-enter,.fade-leave-to{
     opacity:0;
}
.fade-enter-active,.fade-leave-active{
    transition:opacity 3s;
}
</style>

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>

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

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试