![9a5bcd22814a63114328033ef0a7f13b.png](https://i-blog.csdnimg.cn/blog_migrate/c27bfb7e52b6c46c88c56b15f89cebe4.jpeg)
原创:牛津小马哥web前端工程师陈小妹妹。
![fb0bdf7edbaa513c4f99a8b36a343147.png](https://i-blog.csdnimg.cn/blog_migrate/aa576b8b481ba154e6e6833e48b38044.jpeg)
vue中的transtion是一个动画过渡封装组件,常见的情景时用transition标签包裹的DOM含有动画效果。transition组件的动画效果过渡设置基于css的transition属性设置。
如果你对CSS中的transition的使用不够熟悉的话,可以查看往期文章
a href="http://mp.weixin.qq.com/s?__biz=MzIzMDM3NzUwOA==&mid=2247483677&idx=1&sn=8c09f19d204b6892aa0ba0212cb5ccfc&chksm=e8b51056dfc29940dcba7684750fd5eebf0360ec837d5077fdf575f5c5f73d7b8441759da865&scene=21#wechat_redirect">css transition
现在,让我们开始吧!
基本使用:
当页面中的DOM元素需要进行更新,移除和插入时,可使用transition封装组件进行动画的过渡。
同时,transiton组件可配合CSS类名,第三方 CSS 动画库,过渡组件的钩子函数以及第三方 JavaScript 动画库使用。使过渡效果更多样化。
官网例子:
<div id="demo">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#demo',
data: {
show: true
}
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
vue提供的wrapper包装组件——transition,在包裹的元素中,有涉及到v-if,,v-show, 动态组件,组件根节点,,都会给它们添加进入/离开的过渡效果。
Transition Classes
从上面的例子中,也许你发现了给transiton组件的指定class类添加CSS,才有呈现过渡效果。
![1b97642e8f4e1aacc100e72116596986.png](https://i-blog.csdnimg.cn/blog_migrate/23adeaa47ee2204200de90acf037ddb8.png)
一个完整的transiton组件的class类,有6个,通过指定不同的class来添加样式来达到过渡的CSS效果。
01v-enter:定义进入过渡的开始状态。02v-enter-active:定义进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。03v-enter-to: 定义进入过渡的结束状态。04v-leave: 定义离开过渡的开始状态。05v-leave-active:定义离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。06v-leave-to: 定义离开过渡的结束状态。
默认类名是以上6个,如果在transition标签中指定了name=’xxx’,那么6个类名将会变成
xxx开头的,例如xxx-enter-active。
CSS transitions
我们可以通过以下特性来自定义过渡类名:
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
他们的优先级高于普通的类名,一般与其他第三方 CSS 动画库,如 Animate.css结合使用。
其实就是绑定了class在transition标签中,class引用了Animate.css的class样式包。
示例:
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el: '#example-3',
data: {
show: true
}
})
JavaScript 钩子
// ...
methods: {
beforeEnter: function (el) {
//...
},
// 回调函数 done 是可选的
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
beforeLeave: function (el) {
// ...
},
// 回调函数 done 是可选的
leave: function (el, done) {
// ...
done()
},
afterLeave: function (el) {
// ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
// ...
}
}
这些钩子函数可以结合 CSS transitions/animations 使用,也可以单独使用。
当只用 JavaScript 过渡的时候,在enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
可以在属性中声明 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>
关于transtion的内容就是这些~感谢阅读!