您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
概述
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
单元素/组件的过度
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
这里是一个典型的例子：
<div id="app1">
<button @click="show = !show">toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
new Vue({
el:'#app1',
data:{
show:true
}
})
.fade-enter-active, .fade-leave-active{
transition: opacity 2s;
}
.fade-enter, .fade-leave-to{
opacity: 0;
}
运行结果如下：
点击toggle按钮会看见文字淡入淡出的效果。
当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
过度的CSS类名
v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。 这个类可以被用来定义过渡的过程时间，延迟和曲线函数。v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在 transition/animation 完成之后移除。
对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 <transition name="my-transition" 可以重置前缀，比如 v-enter 替换为 my-transition-enter。
CSS过度
常用的过渡都是使用 CSS 过渡。以下为示例代码。
<div id="app2">
<button @click="show = !show">toggle css</button>
<transition name="slide-fade">
<p v-if="show">CSS 过渡</p>
</transition>
</div>
new Vue({
el:'#app2',
data:{
show:true
}
})
.slide-fade-enter-active{
transition: all .3s ease;
}
.slide-fade-leave-active{
transition: all .8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.slide-fade-enter, .slide-fade-leave-to{
transform: translateX(100px);
opacity: 0;
}
运行结果
点击按钮就会看到动画效果。
CSS动画
CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。
示例： (省略了兼容性前缀)
<div id="app3">
<button @click="show = !show">toggle css</button>
<transition name="bounce">
<p v-if="show">css 动画</p>
</transition>
</div>
new Vue({
el:'#app3',
data:{
show:true
}
})
.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);
}
}
运行结果：
自定义过渡类名
我们可以通过以下特性来自定义过渡类名：
他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。
示例：
<link href="https://unpkg.com/animate.css@3.5.1/animate.min.css" rel="external nofollow" rel="stylesheet" type="text/css">
<div id="app4">
<button @click="show = !show">toggle coustom class</button>
<transition name="bounce"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight">
<p v-if="show">自定义过渡类名</p>
</transition>
</div>
new Vue({
el:'#app4',
data:{
show:true
}
})
运行结果：
animate.css的学习可以参考官网：https://daneden.github.io/animate.css/
javascript钩子
可以在属性中声明 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 结合时使用
enter: function (el, done) {
// ...
done()
},
afterEnter: function (el) {
// ...
},
enterCancelled: function (el) {
// ...
},
// --------
// 离开时
// --------
beforeLeave: function (el) {
// ...
},
// 此回调函数是可选项的设置
// 与 CSS 结合时使用
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 的影响。
一个使用 Velocity.js 的简单例子：
<div id="app5">
<button @click="show = !show">toggle hook</button>
<transition @before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false">
<p v-if="show">javascript 钩子使用</p>
</transition>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> <script > new Vue({ el:'#app5', data:{ show:false }, 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}) } } }) </script>
运行结果：
初始渲染的过度
可以通过appear 特性设置节点的在初始渲染的过渡
这里默认和进入和离开过渡一样，同样也可以自定义 CSS 类名。
<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" appear-active-class="custom-appear-active-class"> <!-- ... --> </transition>
自定义 JavaScript 钩子：
<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>
示例代码：
<!--初始渲染-->
<div id="app6">
<transition appear
appear-active-class="animated tada">
<p>初始画面</p>
</transition>
</div>
new Vue({
el:'#app6',
data:{
show:true
}
})
运行结果：
在界面加载该元素时，会有个过渡效果。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。