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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

这样在第一次加载时就会显示动画。

事实上,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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在CSS中定义过渡动画:

<style> .fade-enter,.fade-leave-to{
 opacity:0;
} .fade-enter-active,.fade-leave-active{
 transition:opacity 3s;
} </style>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

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

原文发布时间:06月30日

原文作者:_dalianmiao

本文来源CSDN博客如需转载请紧急联系作者

上一篇:Centos7安装配制VSftp基本(一)


下一篇:vue.js之获取当前点击对象