单个组件
style控制
template
<button @click="show1 = !show1">{{show1}}</button> <transition name="fade"> <div class="test" v-show="show1">show and fade</div> </transition>
script
data: function() { return { show1: true, } },
style
.fade-enter{ opacity: 0 } .fade-enter-active{ transition: 1s; animation: ani 3s linear; } .fade-enter-to{ opacity: 1; } .fade-leave{ opacity: 1; } .fade-leave-active{ transition: 1s } .fade-leave-to{ opacity: 0 } @keyframes ani{ 0%{ transform: rotate(0deg) } 50%{ transform: rotate(180deg) } 100%{ transform: rotate(360deg) } }
css中的“fade”只是transition的名字,-enter表示从无到出现的初始状态,-enter-to表示出现的末状态,-enter-active表示变化的状态,transition和animate在此处插入
leave表示消失,以此类推
扫描二维码关注公众号,回复:
7964777 查看本文章
js - attribute控制
<transition name="fade" @enter="enter" @before-enter='beforeEnter' @after-enter='afterEnter' @leave='leave' @before-leave='beforeLeave' @after-leave='afterLeave' :css="false"> <div class="test" v-show="show1">show and fade</div> </transition>
script
//import jquery from 'jquery'
data: function() { return { show1: true, } }, methods: { enter: function(el, done) { console.log(el) jquery(el).animate({ width: '-=100', color: 'green' }, { duration: 3000, done: function() { console.log('done')
done() } }) console.log('enter') }, beforeEnter: function() { console.log('beforeEnter') }, afterEnter: function() { console.log('afterEnter') }, leave: function(el, done) { console.log('leave') done() }, beforeLeave: function() { console.log('leaveEnter') }, afterLeave: function () { console.log('afterLeave') } }
函数调用顺序:出现:beforeEnter - > enter -> afterEnter ;消失:beforeLeave->leave->afterLeave
其中enter和leave表示出现或者消失的过程,在此处调用动画的逻辑,
例如此处利用jquery的animate函数,表示出现后宽度减少100 在3000ms内
函数自动提供了el, 和done两个形式参数,el表示dom元素,done表示动画过程已经完成,如果在没有掉用此函数,动画效果将会在瞬间完成。
transition tag提供:css表示是否收css影响
组件群
tip group <button @click="tipsAdd">add</button> <button @click="tipsDec">dec</button> <button @click="mad">mad</button> </div> <transition-group name="tip-group" tag="ul"> <li v-for="item in tips" :key="item">items + {{item}}</li> </transition-group>
methods: { tipsAdd: function() { let len = this.tips.length this.tips.splice(Math.random() * len, 0, this.count++) }, tipsDec: function() { let len = this.tips.length this.tips.splice(Math.random() * len, 1) }, mad: function() { this.tips = _.shuffle(this.tips) } }
.tip-group-enter, .tip-group-leave-to { transform: translateX(50px) } .tip-group-enter-active, .tip-group-leave-active, .tip-group-move { transition: .8s }
css的规则和上面的完全一样,只不过是将单个组件的影响修改到了内部包含的全部组件,另外还增加了一个 -move的css属性,这个属性表示整个transition的改变所需要的动画,例如打乱这个列表的顺序等等,这个css属性不受transition tag中的:css属性影响。
总而言之最常用的就是这些,数据驱动