Vue的transition实现动画效果
Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡；
在进入/离开的过渡中，会有 6 个 class 切换；
v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to。
image.png
示例：
<transition name="slide">
<div class="sider" v-if="visible">
<p>hello</p>
<button class="close" @click="visible=false">close</button>
</div>
</transition>
.slide-enter-active, .slide-leave-active {
transition: all .3s;
}
.slide-enter, .slide-leave-to {
margin-left: -200px;
}
vue动画transiton的多种用法：
1. transition
<transition name="fade">
<p v-if="visible">hello</p>
</transition>
要先设置好对应的样式属性才能有对应的变化
.fade-enter-active, .fade-leave-active {
transition: all 3s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
width:100px;
}
p{
border:1px solid red;
width:300px;
}
2. 还可以配合animation实现动画+@keyframes
<div id="example-2">
<button @click="show = !show">Toggle show</button>
<transition name="bounce">
<p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</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);
}
}
3. animate.css 库
先引入animate.css库
https://daneden.github.io/animate.css/
可以设置不同动画单词出现不同动画效果
<transition
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
4. JavaScript钩子
<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) {
// ...
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。
5. Velocity.js
可以使用Velocity.js 需要先引用哦
methods: {
beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
Velocity(el, { fontSize: '1em' }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, { complete: done })
}
}
6. 多个元素的过渡
<div id="example-2">
<transition name="fade" mode="out-in">
<button v-if="isEditing" key="save"
@click="isEditing=!isEditing">
Save
</button>
<button v-else key="edit"
@click="isEditing=!isEditing">
Edit
</button>
</transition>
</div>
.fade-enter-active, .fade-leave-active {
transition: all 1s;
}
.fade-enter {
opacity: 0;
transform: translateX(50px);
}
.fade-leave-to {
opacity: 0;
transform: translateX(-50px);
}
#example-2{
position: relative;
padding: 100px;
}
#example-2 button {
position: absolute;
}
这种思路就可以做出轮播的效果了。
本人就这种思路写了一个轮播组件。
源码和使用文档
7. 多个组件的过渡
<div id="transition-components-demo">
<button @click='view="v-a"'>a</button>
<button @click='view="v-b"'>b</button>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
</div>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
这样写就可以做tabs了
8. for循环怎么动画 （列表的进入/离开过渡）
<transition-group name="list" tag="p">
<span v-for="item in items" v-bind:key="item" class="list-item">
{{ item }}
</span>
</transition-group>
要点： 标签transition-group、设置一个tag标签、紧跟一个for循环
注意，每个 <transition-group>的子节点必须有独立的 key，动画才能正常工作。
--参考来自Vue官方文档：过渡 & 动画
