Vue中的动画
程序员文章站
2022-05-03 20:05:43
...
Vue中的动画
直接使用过度类名实现动画
- 使用
<transition>
元素包裹需要动画元素-
<transition>
元素是Vue
官方提供的元素
-
- 使用
Enter
表示进入的动画:不透明度由0
到1
- 使用
v-enter
表示进入之前的初始状态 - 使用
v-enter-to
表示进入完成的结束状态 - 使用
v-enter-active
表示由v-enter
到v-enter-to
的时间段
- 使用
- 使用
Leave
表示离开的动画:不透明度由1
到0
- 使用
v-leave
表示离开之前的初始状态 - 使用
v-leave-to
表示离开完成的结束状态 - 使用
v-leave-active
表示由v-leave
到v-leave-to
的时间段
- 使用
- 通过上述的过度类自定义两组样式控制动画元素以达到动画效果
- 可以通过设置
<transition>
元素的name
属性指定过度类名的前缀
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
.v-enter,.v-leave-to{
/* 使用 opacity 控制不透明度 */
opacity: 0;
/* 控制位移 */
transform: translateX(200px);
}
.v-leave-active,.v-enter-active{
/* 过度所有属性 过度时间 过度状态 */
transition: all 0.4s ease;
}
.my-enter,.my-leave-to{
/* 使用 opacity 控制不透明度 */
opacity: 0;
/* 控制位移 */
transform: translateY(200px);
}
.my-leave-active,.my-enter-active{
/* 过度所有属性 过度时间 过度状态 */
transition: all 0.4s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="切换" @click="flag=!flag">
<transition>
<h1 v-show="flag">Hello World!!!</h1>
</transition>
<input type="button" value="切换" @click="flag2=!flag2">
<transition>
<h1 v-show="flag2">Hello World!!!</h1>
</transition>
<input type="button" value="切换" @click="flag3=!flag3">
<transition name="my">
<h1 v-show="flag3">Hello World!!!</h1>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false,
flag2:false,
flag3:false
},
methods: {
}
});
</script>
</body>
</html>
使用钩子函数实现
动画的生命周期函数
- 入场时的钩子函数
- 使用
v-on:before-enter="beforeEnter"
指定进入前的函数- 可以在
beforeEnter
中设置开始动画的起始样式
- 可以在
- 使用
v-on:enter="Enter"
指定进入后的函数- 可以在
Enter
中设置完成动画的结束样式 - 使用
Enter
函数时需传入done
参数,并且必须调用,否则进行同步操作,可能导致延迟
- 可以在
- 使用
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"
指定离开取消的函数
- 使用
- 每个函数都有
el
参数,即代表vue
实例的el
属性指定的元素
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
.ball{
width: 100px;
height: 100px;
border-radius: 50px;
background-color: orange;
}
</style>
</head>
<body>
<div id="app">
<input type="button" @click="flag=!flag" value="开始半场动画">
<transition @before-enter="beforeEnter" @enter="Enter" @after-enter="afterEnter">
<div v-show="flag" class="ball"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false
},
methods: {
beforeEnter(el){
el.style.transform = "translate(0,0)"
},
Enter(el,done){
el.offsetHeight
el.style.transform = "translate(300px,500px)"
el.style.transition = "all 1s ease"
// done 就是表示 afterEnter
done()
},
afterEnter(el){
this.flag=!this.flag
}
}
});
</script>
</body>
</html>
列表的动画效果
- 在实现列表动画过度时,如果过渡元素通过
v-for
循环指令渲染出来的,则不能使用transition
元素包裹 - 可以使用
transition-group
元素 - 如果要给
v-for
循环渲染的元素设置动画,则每一项加:key
属性 - 可以使用
v-move
设置列表元素在位移时的相关设置 - 给
<transition-group>
元素添加appear
属性实现入场特效 - 通过
<transition-group>
元素的tag
属性指定<transition-group>
元素被渲染的目标元素- 如果不指定则其默认为
<span>
示例如下:
- 如果不指定则其默认为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
li{
border: 1px dashed salmon;
margin: 5px;
line-height: 50px;
padding-left: 50px;
font-size: 24px;
width: 100%;
}
li:hover{
background-color: crimson;
transition: all 0.8s ease;
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease;
}
.v-move{
transition: all 0.5s ease;
}
.v-leave-active{
position: absolute;
}
</style>
</head>
<body>
<div id="app">
<div>
<label for="">
Id:
<input type="text" v-model="id" />
</label>
<label for="">
Name:
<input type="text" v-model="name" />
</label>
<input type="button" value="添加" @click="add">
</div>
<!-- <ul>
<transition-group appear>
<li @click="del(index)" v-for="(item,index) in list" :key="item.id">
{{ item.id.toString().padStart(2,'0') }}----{{ item.name }}
</li>
</transition-group>
</ul> -->
<transition-group appear tag="ul">
<li @click="del(index)" v-for="(item,index) in list" :key="item.id">
{{ item.id.toString().padStart(2,'0') }}----{{ item.name }}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
list:[{
id:1,
name:'java'
},{
id:2,
name:'C'
},{
id:3,
name:'C++'
},{
id:4,
name:'Python'
},{
id:5,
name:'javascript'
}]
},
methods: {
add(){
this.list.push({id:this.id,name:this.name})
this.id = this.name = ''
},
del(i){
this.list.splice(i,1)
}
}
});
</script>
</body>
</html>
实现缩略图缩放动画可以使用
transform: scale(1.5);
scale()
中传入的参数为缩放比例
示例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="./vue.js"></script>
<style type="text/css">
.img{
width: 180px;
height: 240px;
display: block;
overflow: hidden;
}
.img img{
width: 180px;
height: 240px;
transition: all 0.1s ease;
}
.img img:hover{
transform: scale(1.5);
}
.div1{
padding: 20%;
float: left;
height: 600px;
}
.img1{
width: 180px;
height: 240px;
}
.img2{
position: absolute;
width: 0px;
transition: all 0.3s linear 0s;
z-index: 12;
}
.img1:hover + .img2{
width: 360px;
height: 480px;
transform: translate(0,300px);
}
</style>
</head>
<body>
<div class="img">
<img width="180" height="240" src="./01.jpg" alt=""/>
</div>
<div class="div1">
<img class="img1" width="180" height="240" src="./01.jpg" alt="">
<img class="img2" width="180" height="240" src="./01.jpg" alt="">
</div>
</body>
</html>
推荐阅读