|
Vue中动画的使用 Vue的中动画，并不像想象中的那样强大，它只能控制标签或者组件的显示到隐藏，或者隐藏到显示的过程。 所以它能控制的过程有两个： 1、从显示到隐藏 2、从隐藏到显示 而Vue的指令中，恰好有v-if和v-show正是控制元素或者标签的显示或者隐藏的，所以vue的动画，往往需要在标签中结合v-if或者v-show来进行使用。
下面介绍几种动画实现的方式： 1、使用自己写类样式来实现动画 <transition> <h3 v-if="flag">这是一个H3</h3> </transition> 如何理解以上代码呢？ 给了h3外包裹了一层transition之后，当h3通过v-if或者v-show进行显示 或者隐藏的时候，Vue会给h3标签增加一系列类样式。 以隐藏到显示的过程说明： (1) v-enter这个是vue在即将动画开始的一瞬间为元素增加的，然后瞬间移除。我们可以自己写一个class类样式就叫做v-enter,在v-enter中设置该元素在此状态下的初始值。 .v-enter{ transform:translateX(400px); } (2) v-enter-active这个是在整个动画的过程中都存在的类样式。我们可以自己写一个类样式就叫做v-enter-active,在v-enter-active中设置该元素的过渡规则。 .v-enter{ transition:transform 1s linear; }
(3) v-enter-to这个是在整个动画的过程中都存在的类样式，但是添加该类的时机比v-enter-active更晚一点.我们可以在v-enter-to设置元素的目标位置。
所以总结如下： v-enter 设置元素的初始状态 v-enter-to 设置元素的结束状态 v-enter-active 设置过渡规则 我们也可以更改类样式的前缀，将v-中的v变成我们自己想要的名称，通过name属性指定 <transition name="haha"> <h3 v-if="flag">这是一个H3</h3> </transition> 2、使用第三方库Animate.css 从1中我们知道Vue会给h3标签增加一系列类样式，样式的名称默认是v-xxx的形式,如果我们想改变这些 类样式名称，让他使用Animate中已经有的类样式名称，可以给transition设置 <transition enter-active-class="bounceIn" , enter-to-class="haha" , leave-active-class="bounceOut" :duration="{ enter: 20000, leave: 40000 }"> <h3 v-if="flag" class="animated">这是一个H3</h3> </transition>
:duration控制的不是动画的时长，而是样式存在的时长 3、使用回调函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-show="flag"></div> </transition> data:{ flag:false }, methods:{ afterEnter(){ this.flag = !this.flag } } 4、列表动画 元素如果是通过v-for方式来循环渲染，transition这个标签就不知道该加给谁 <transition-group appear tag="ul"> <li v-for="(item, i) in list" :key="item.id" @click="del(i)"> {{item.id}} --- {{item.name}} </li> </transition-group>
依然要写v-xxx的类样式，参照动画第一种使用方式
删除元素时，其他元素会增加的类样式 .v-move { transition: all 6s ease; }
这个是为了让被删除的元素不占位，不占位了，它下边的元素就能往上走 而我们在v-move中有设置了过度规则，所以会慢慢的往上走 .v-leave-active{ position: absolute; }
appear 第一次加载的时候，给列表的所有元素执行动画 tag：默认transition-group会给所包裹的标签增加一个大的父容器span 如果由于这个span产生了问题，比如样式运用不上等，那么我们可以修改这个值
| 
收藏
淘帖
踩
