1、Vue单组动画
动画过渡效果：https://cn.vuejs.org/v2/guide/transitions.html
- v-enter：进入时状态
- v-enter-to：进入后状态
- v-leave: 离开时状态
- v-leave-to：离开后状态
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div{width: 100px; height: 100px;background: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(50px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="btn">点击</button>
<transition>
<div class="div" v-if="flag"></div>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false
},
methods:{
btn(){
this.flag = !this.flag;
}
},
})
</script>
</body>
</html>
2、Vue定义多组动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div{width: 100px; height: 100px;background: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateX(50px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
.test-enter,
.test-leave-to{
opacity: 0;
transform: translateY(100px);
}
.test-enter-active,
.test-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<button @click="btn">点击</button>
<transition>
<div class="div" v-if="flag"></div>
</transition>
<hr>
<button @click="btn1">点击1</button>
<transition name="test" mode="">
<h1 v-if="flag1" >123</h1>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false,
flag1:false
},
methods:{
btn(){
this.flag = !this.flag;
},
btn1(){
this.flag1 = !this.flag1;
}
},
})
</script>
</body>
</html>
3、使用animate动画库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
</style>
</head>
<body>
<div id="app">
<button @click="btn">点击</button>
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
<div class="div" v-if="flag"></div>
</transition>
<hr>
<button @click="btn1">点击1</button>
<transition name="test" mode="">
<h1 v-if="flag1" >123</h1>
</transition>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:false,
flag1:false
},
methods:{
btn(){
this.flag = !this.flag;
},
btn1(){
this.flag1 = !this.flag1;
}
},
})
</script>
</body>
</html>
4、transition-group 列表动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/animation.css"/>
<style>
.div{width: 100px; height: 100px;background: red;}
.v-enter,
.v-leave-to{
opacity: 0;
transform: translateY(100px);
}
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
</style>
</head>
<body>
<div id="app">
<!--
在transition-group内部不需要再加上ul,在tag中添加
属性appear可以添加入场属性动画
-->
<transition-group tag="ul" appear>
<li v-for="(item, i) in list" :key="item.id">
{{item.id}}=={{item.name}}=={{item.age}}
</li>
</transition-group>
<input type="text" placeholder="id" v-model="id"/>
<input type="text" placeholder="name" v-model="name"/>
<input type="text" placeholder="age" v-model="age"/>
<button @click="btn">新增</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
id:'',
name:'',
age:'',
list:[
{id:1,name:'小米',age:18},
{id:2,name:'小明',age:28},
{id:3,name:'小宜',age:38}
]
},
methods:{
btn(){
var newobj = {id:this.id,name:this.name,age:this.age}
this.list.push(newobj);
}
},
})
</script>
</body>
</html>