vue过渡动画
1.如何给Vue控制的元素添加过渡动画
1.1将需要执行动画的元素放到transition组件中
1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名;当transition组件中的元素隐藏时会自动查找.v-leave/.v-leave-active/.v-leave-to类名
1.3我们只需要在.v-enter和.v-leave-to中指定动画动画开始的状态,在.v-enter-active和.v-leave-active中指定动画执行的状态, 即可完成过渡动画
通过按钮实现动态显示和隐藏元素实例
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-animation</title>
<script src="vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background: #ff9900;
}
.v-enter{
opacity: 0;
}
.v-enter-active{
transition: all 3s;
}
.v-enter-to{
opacity: 1;
}
.v-leave{
opacity: 1;
}
.v-leave-active{
transition: all 3s;
}
.v-leave-to{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle()">按钮</button>
<transition>
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
isShow:false,
name:"单佳兰"
},
methods:{
toggle(){
this.isShow=!this.isShow;
}
}
});
</script>
</body>
/html>
transition注意点
1.transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件
2.初始动画设置
默认情况下第一次进入的时候没没有动画的
如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
告诉Vue第一次进入就需要显示动画
3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue-animation</title>
<script src="vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background: #ff9900;
}
.one-enter{
opacity: 0;
}
.one-enter-active{
transition: all 3s;
}
.one-enter-to{
opacity: 1;
}
.two-enter{
opacity: 0;
}
.two-enter-active{
transition: all 3s;
}
.two-enter-to{
opacity: 1;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle()">按钮</button>
<transition name="one" appear>
<div class="box" v-show="isShow"></div>
</transition>
<transition name="two" appear>
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
isShow:true,
name:"单佳兰"
},
methods:{
toggle(){
this.isShow=!this.isShow;
}
}
});
</script>
</body>
</html>
执行完过渡动画元素会复位，本质就是绑定的v-leave……等类名不会被绑定；
解决方案：Vue钩子函数实现
1.上面过渡存在的问题
通过transition+类名的方式确实能够实现过渡效果
但是实现的过渡效果并不能保存动画之后的状态
因为Vue内部的实现是在过程中动态绑定类名, 过程完成之后删除类名,正是因为删除了类名, 所以不能保存最终的效果
2.在Vue中如何保存过渡最终的效果
通过Vue提供的JS钩子来实现过渡动画
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" 离开动画被取消
3.JS钩子实现过渡注意点
3.1在动画过程中必须写上el.offsetWidth或者el.offsetHeight
3.2在enter和leave方法中必须调用done方法, 否则after-enter和after-leave不会执行
3.3需要需要添加初始动画, 那么需要把done方法包裹到setTimeout方法中调用
4【注意点】
- 注意点: 虽然我们是通过JS钩子函数来实现过渡动画
但是默认Vue还是回去查找类名, 所以为了不让Vue去查找名
可以给transition添加v-bind:css="false" - 注意点: 如果是通过JS钩子来实现过渡动画
那么必须在动画执行过程中的回调函数中写上
el.offsetWidth / el.offsetHeight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background: orange;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition appear
v-bind:css="false"
v-on:enter="enter"
v-on:before-enter="beforeEnter"
v-on:after-enter="afterEnter">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
name:"单佳兰",
isShow:true
},
methods:{
toggle() {
this.isShow=!this.isShow;
},
beforeEnter(el){
console.log("beforeEnter");
el.style.opacity=0;
},
enter(el,done){
el.offsetWidth;
console.log("Enter");
el.style.transition="all 3s"
//只有执行了done()回调函数才会执行afterenter的方法
setTimeout(
function (){
done();
},0
)
},
afterEnter(el){
console.log("afterEnter");
el.style.opacity=1;
}
}
});
</script>
</body>
</html>
1.配合Velocity实现过渡动画
在Vue中我们除了可以自己实现过渡动画以外, 还可以结合第三方框架实现过渡动画
- 1.1 导入Velocity库
- 1.2 在动画执行过程钩子函数中编写Velocity动画
【补充】自定义类名动画
在Vue中除了可以使用 默认类名(v-xxx)来指定过渡动画
除了可以使用 自定义类名前缀(yyy-xx)来指定过渡动画(transition name="yyy")
除了可以使用 JS钩子函数来指定过渡动画以外
还可以使用自定义类名的方式来指定过渡动画
enter-class // 进入动画开始之前
enter-active-class // 进入动画执行过程中
enter-to-class// 进入动画执行完毕之后
leave-class // 离开动画开始之前
leave-active-class // 离开动画执行过程中
leave-to-class // 离开动画执行完毕之后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background: #ff9900;
}
.a{
opacity: 0;
}
.b{
transition: all 3s;
}
.c{
opacity: 1;
}
</style>
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition enter-class="a"
enter-active-class="b"
enter-to-class="c">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
isShow:false,
name:"单佳兰"
},
methods:{
toggle(){
this.isShow=!this.isShow;
}
}
});
</script>
</body>
</html>
使用animate.css第三方库来实现动画
1.配合Animate.css实现过渡动画
1.1导入Animate.css库
https://cdn.jsdelivr.net/npm/animate.css@3.5.1
1.2在执行过程中的属性上绑定需要的类名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background: #ff9900;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
<button @click="toggle">按钮</button>
<transition appear
enter-class=""
enter-active-class="animated bounceInRight"
enter-to-class="">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue=new Vue({
el:"#app",
data:{
isShow:true,
name:"单佳兰"
},
methods:{
toggle(){
this.isShow=!this.isShow;
}
}
});
</script>
</body>
</html>
