1.简单动画案例
<!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>Document</title>
<!--
2.自定义两组样式来控制transition内部的元素实现动画
<style>一定要写在<script src="./vue.js">之前
-->
<style>
/*
v-enter 动画开始前元素的起始状态
v-leave-to 动画结束之后 动画已执行完毕
*/
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(150px);
}
/*
.v-enter-active 入场动画的时间段
.v-leave-active 离场动画的时间段
*/
.v-enter-active,
.v-leave-active {
transition: all 1s ease;
}
</style>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我切换" @click="flag=!flag">
<!-- 1.使用transition把需要动画的元素包裹起来 transition是Vue提供的 -->
<transition>
<p v-show="flag">我是段落...我是段落...我是段落...我是段落...我是段落...</p>
</transition>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
flag : false
}
});
</script>
</body>
</html>
2.自定义动画前缀
<style>
.my-enter,
.my-leave-to {
opacity: 0;
}
.my-enter-active,
.my-leave-active {
transition: all 1s ease;
}
</style>
<div id="app">
<input type="button" value="显示/隐藏" @click="flag2 = !flag2">
<transition name="my">
<h3 v-show="flag2">这是h3</h3>
</transition>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
flag2 : false
}
})
</script>
3.半场动画
<!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>Document</title>
<style>
.ball {
width: 15px;
height: 15px;
background-color: red;
border-radius: 50%;
}
</style>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<input type="button" value="点我" @click="flag = !flag">
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<div class="ball" v-show="flag"></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.offsetWidth 动画无法执行
el.offsetWidth;
el.style.transform = "translate(150px,450px)";
el.style.transition = "all 1s ease";
done();
},
afterEnter(el){
this.flag = !this.flag;
}
}
});
</script>
</body>
</html>
4.列表动画
<!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>Document</title>
<style>
li {
width: 200px;
line-height: 30px;
border: 1px dotted gray;
margin-bottom: 5px;
padding-left: 5px;
}
li:hover {
background-color: hotpink;
transition: all .5s ease;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(80px);
}
.list-enter-active,
.list-leave-active {
transition: all .5s ease-in;
}
.list-move {
transition: all .5s ease-in;
}
.list-leave-active {
position: absolute;
}
</style>
<script src="./lib/vue.js"></script>
</head>
<body>
<div id="app">
<label>
编号:
<input type="text" v-model="id">
</label>
<label>
姓名:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
<transition-group tag="ul" name="list">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{item.id}} --- {{item.name}}
</li>
</transition-group>
</div>
<script>
var vm = new Vue({
el : '#app',
data : {
id : '',
name : '',
list : [
{id : 1,name : 'sam smith'},
{id : 2,name : 'ed sheeran'},
{id : 3,name : 'calvin harris'},
{id : 4,name : 'celine dion'}
]
},
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>