使用过渡类名实现
1.使用<transition>标签包裹起需要动画的元素
2.设置类样式
3.通过在<transition>标签中添加name属性修改类样式中v-前缀用于区分不同动画
<transition name=" my ">
.my-enter,
.my-leave-to{
} ……
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform: translateX(150px);
}
.v-enter-active,
.v-leave-active{
transition: all 0.8s;
}
</style>
</head>
<body>
<div class="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition>
<h3 v-show="flag">动起来</h3>
</transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
flag:false
}
})
</script>
</body>
</html>使用animate.css第三方库实现
- 引入文件（animate.css）
- 在<transition>标签中 添加 enter-active-class(进入时的动画)，leave-active-class(离开时的动画) ， :duration(时长) 等属性。其中 enter-active-class="库中的类名" :duration="毫秒值"属性可忽略
- 在要做动画的元素中添加class="animated"属性
<link href="../lib/animate.css" rel="stylesheet">
<div class="app">
<input type="button" value="toggle" @click="flag=!flag">
<transition enter-active-class="rollIn" leave-active-class="rollOut">
<h3 v-show="flag" class="animated">动起来</h3>
</transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el:'.app',
data:{
flag:false
}
})
</script>使用钩子函数自定义动画效果
说明：
<!--绑定事件处理函数，进入事件，还有离开事件（自选），离开事件只需要把enter改成leave即可-->
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
</transition>
<script>
var vm = new Vue({
methods: {
beforeEnter(el){
el.style.transform = 'translate(0, 0)'
},
enter(el,done){
el.offsetLeft; //必须加上offset属性，不然不会出现动画
el.style.transform = 'translate(150px,200px)';
el.style.transition = 'all 0.8s';
done(); //也就是afterEnter函数，调用下一个函数，最好加上，保证出现bug
},
afterEnter(el){
this.flag = !this.flag
}
}
})
</script>使用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.qiu {
height: 16px;
width: 16px;
border-radius: 50%;
background-color: red;
}
</style>
</head>
<body>
<div class="app">
<input type="button" value="快到碗里来" @click="flag=!flag">
<transition
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter">
<div class="qiu" v-if="flag"></div>
</transition>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
flag: false
},
methods: {
beforeEnter(el){
el.style.transform = 'translate(0, 0)'
},
enter(el,done){
el.offsetLeft;
el.style.transform = 'translate(150px,200px)';
el.style.transition = 'all 0.8s';
done();
},
afterEnter(el){
this.flag = !this.flag
}
}
})
</script>
</body>
</html>使用transition-group标签实现列表动画
注意：在使用列表过渡效果的时候，是通过v-for循环渲染出来的，不能使用transition标签包裹需要做动画的元素，而是应该使用transition-group标签
transition-group标签中添加appear属性，实现页面入场时的效果
transition-group标签中添加tag="标签名（ul）"属性，指定transition-group渲染为指定的元素（ul），如果不指定，默认为span标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li {
border: 1px dashed #999;
line-height: 40px;
margin: 5px;
padding-left: 10px;
width: 100%;
}
li:hover {
background-color: hotpink;
}
.v-enter,
.v-leave-to{
opacity:0;
transform: translateY(80px);
}
.v-enter-active,
.v-leave-active{
transition:all 0.8s;
}
/*点击时删除的过渡动画效果Start*/
.v-move{
transition:all 0.8s;
}
.v-leave-active{
position: absolute;
}
/*点击时删除的过渡动画效果end*/
</style>
</head>
<body>
<div class="app">
<div>
<label>
id:
<input type="text" v-model="id">
</label>
<label>
name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<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>
</div>
<script src="../lib/vue-2.4.0.js"></script>
<script>
var vm = new Vue({
el: '.app',
data: {
id: '',
name: '',
list: [
{id: 1, name: '马云'},
{id: 2, name: '马化腾'},
{id: 3, name: '李彦宏'}
]
},
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>