Author: vanessa
Date: 2018/06/20
1.css过渡,transition
<div id="example-1">
<button @click="show = !show">
Toggle render
</button>
<transition name="slide-fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-1',
data: {
show: true
}
})
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
过渡的类名
1.v-enter:进入过渡的开始状态
2.v-enter-active:进入过渡的过程
3.v-enter-to:进入过渡的结束状态
4.v-leave:离开过渡的开始状态
5.v-leave-active:离开过渡的过程
6.v-leave-to:离开过渡的结束状态
ps:v取决于transition标签上name的值
2.css动画,animation
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum d.</p>
</transition>
</div>
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
动画中v-enter类名在节点插入DOM后不会立即删除,而是在animateionend事件触发时删除
写法区别在css样式
3.自定义过渡的类名
enter-class,enter-active-class,enter-to-class,
leave-class,leave-active-class,leave-to-class
在transition标签中定义具体的class名即可
<transition name="fade" enter-class="enter" enter-active-class="active">
4.同时使用过渡和动画
当使用过渡时,vue有transitionend事件监听器,
当使用动画时,vue有animationend事件监听器,
同时使用动画和过渡,需要使用type属性设定animation或transition来明确vue监听类型
5.显性的过渡时间
<transition :duration="1000">...</transition>//毫秒单位
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
6.js钩子即方法
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
>
<!-- ... -->
</transition>
methods: {
beforeEnter: function (el) {
},
enter: function (el, done) {
done()
},
afterEnter: function (el) {
},
enterCancelled: function (el) {
},
beforeLeave: function (el) {
},
leave: function (el, done) {
done()
},
afterLeave: function (el) {
},
leaveCancelled: function (el) {
}
}
ps:在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
7.多个元素的过渡,过渡的模式mode=“in-out/out-in”
<transition>
<table v-if="item.length>0">
</table>
<p v-else>sorry,no item</p>
</transition>
<transition>
<button v-bind:key="docState">
{{ buttonMessage }}
</button>
</transition>
computed: {
buttonMessage: function () {
switch (this.docState) {
case 'saved': return 'Edit'
case 'edited': return 'Save'
case 'editing': return 'Cancel'
}
}
}
ps:当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们
<transition>
<button v-if="isEditing" key="save">
Save
</button>
<button v-else key="edit">
Edit
</button>
</transition>
8.多个组件的过渡
<div>
<input type="radio" name="sel" value="A" @click="selectChange">A
<input type="radio" name="sel" value="B" @click="selectChange">B
</div>
<transition name="component-fade">
<component :is="view"></component>
</transition>
data:{
view:'v-a'
},
components:{
'v-a':{
template:'<div>Component A</div>'
},
'v-b':{
template:'<div>aha,Component B,</div>'
}
},
methods:{
selectChange:function(e){
if(e.target.value=='A'){
this.view='v-a'
}else{
this.view='v-b'
}
}
}
9.列表的过渡,transtion-group
,不同与transtion,
1.他会以span标签形式存在,可以通过tag改变,
2.过渡模式不可以,
3.内部元素需要提高唯一的key