使用过渡类名实现动画
.v-enter [这是一个时间点] 是进入之前,元素的起始状态,此时还没有开始进入
.v-leave-to [这是一个时间点] 是动画离开之后,离开的终止状态,此时,元素动画已经结束了
.v-enter-active [入场动画的时间段] .v-enter-active [出场动画的时间段]
说明:使用transition元素,把需要被动画控制的元素,包裹起来,例如:,transition元素,是vue官方提供的;自定义两组样式,来控制transition内部的元素实现动画
例如:
<style>
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active {
transition: all 2s ease;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition><h3 v-if="flag">这是一个H3</h3></transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
})
</script>
</body>
</html>
使用自定义动画
例如:
<style>
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateY(100px);
}
.my-enter-active,
.my-leave-active {
transition: all 2s ease;
}
</style>
<body>
<div id="app">
<input type="button" value="toggle2" @click="flag2=!flag2">
<transition name="my">
<h6 v-if="flag2">这是一个H3</h6>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag2: false
},
methods: {}
})
</script>
</body>
注意:transition添加了一个name属性
使用animated实现动画
首先需要下载animated.css的包,下载地址:animated.css
引入vue.js和animated.css的包
其中::duration="毫秒值"来统一设置入场和离场时候的动画时长;使用 :duration="{ enter:200,leave:400}"来分别设置入场时长和离场时长
钩子函数的使用
模拟小球的半场动画例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>小球半场动画</title>
<!-- <script src="../lib/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
.ball {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<!-- 1、使用transition元素把小球包裹起来 -->
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag"></div>
</transition>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag: false,
},
methods: {
// 注意:动画钩子函数的第一个参数:el表示要执行动画的那个DOM元素,是个原生的JS DOM对象
// 大家可以认为,el是通过document.getElementById('')方式获取到的原生的JS DOM对象
beforeEnter(el) {
// 表示动画入场之前,此时动画尚未开始,可以在beforeEnter中,设置元素开始动画之前的起始样式
// 设置小球开始动画之前的起始位置
el.style.transform = "translate(0, 0)";
},
enter(el, done) {
//这句话没有实际的作用,但是,如果不写,出不来动画的效果
// 可以认为el.offsetWidth会强制动画刷新
// offsetLeft/offsetHeight/offsetTop等只要与offset有关的都可以达到相同的效果
el.offsetWidth;
// enter表示动画开始之后的样式,这里,可以设置小球完成之后的,结束状态
el.style.transform = "translate(150px, 450px)";
el.style.transition = 'all 1s ease';
//这里的done,其实就是afterEnter这个函数,也就是说:done是afterEnter函数的应用
done();
},
afterEnter(el) {
// 动画完成之后,会调用 afterEnter
this.flag = !this.flag;
}
}
})
</script>
</body>
</html>
动画-transition-group中appear和tag属性的作用
1、.v-move和.v-leave-active配合使用,能够实现transition-group所控制的元素渐渐地飘上来
2、在实现列表过渡的时候,如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用transition包裹,需要使用transition-group
3、如果要为v-for玄幻创建的元素设置动画,必须为每一个元素,设置 :key 属性
4、给transition-group添加appear属性,实现页面刚展示出来的时候,入场时候的效果
5、通过为transition-group元素,设置tag属性,指定transition-group渲染为指定的元素,如果不指定tag属性,渲染为默认的span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>列表动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<style>
li {
border: 1px dashed #999;
margin: 5px;
line-height: 35px;
padding-left: 5px;
font-size: 12px;
width: 100%;
}
li:hover {
background-color: blueviolet;
transition: all 0.8s ease;
}
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.6s ease;
}
/* 下面的.v-move和.v-leave-active配合使用,能够实现列表后续的元素,渐渐地飘上来 */
.v-move {
transition: 0.6s 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>
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过v-for循环渲染出来的,不能使用transition包裹,需要使用transitionGroup -->
<!-- 如果要为v-for 循环创建的元素设置动画,必须为每一个元素 设置:key属性 -->
<!-- 给transition-group添加appear属性,实现页面刚展示出来的时候,入场时候的效果 -->
<!-- 通过为transition-group元素,设置tag属性,指定transition-group渲染为指定的元素,如果不指定tag属性,渲染为span标签 -->
<transition-group appear tag="ul">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}}------{{item.name}}
</li>
</transition-group>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: '赵高'
}, {
id: 2,
name: '秦桧'
}, {
id: 3,
name: '严嵩'
}, {
id: 4,
name: '魏忠贤'
}]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
});
this.name = this.id = '';
},
del(i) {
this.list.splice(i, 1);
}
}
})
</script>
</body>
</html>