vue自带的动画:
v-enter这是一个时间点,是进入之前,元素的起始状态,此时还没有开始进入
v-leave-to 也是一个时间点,是动画离开之后,离开的终止状态,此时东湖啊已经结束了。
v-enter-active 入场动画的时间段
v-leave-active 立场动画的时间段
使用:
1、用transition元素把需要被动画控制的元素包裹起来,这个元素vue官方提供的
2、规定类样式
自定义前缀动画:
1、用transition元素把需要被动画控制的元素包裹起来,这个元素vue官方提供的,并在这个transition元素里加一个属性name=”自定义名称”
2、规定类样式,把前缀v 换成自定义名称
例子:
<!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 src="lib/vue.js"></script>
<style>
/* 记得加点啊啊啊啊,相当于类样式 */
.v-enter, .v-leave-to {
opacity: 0;
transform: translateX(80px);
}
.v-enter-active, .v-leave-active {
transition: all 2s ease;
}
/* 自定义类样式 */
/* 记得加点啊啊啊啊,相当于类样式 */
.my-enter, .my-leave-to {
opacity: 0;
transform: translateY(80px);
}
.my-enter-active, .my-leave-active {
transition: all 2s ease;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="flag=!flag">切换</button>
<transition>
<h1 v-if="flag">哈哈,看见了吗</h1>
</transition>
<hr>
<!-- 不想和上面那个共用一个动画,可以自定义一个前缀动画 -->
<button v-on:click="flag2=!flag2">切换</button>
<!-- 要定义一个属性 name="my", 再把前缀v替换成 my -->
<transition name="my">
<h1 v-if="flag2">哈哈,看见了吗</h1>
</transition>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
flag: false,
flag2: false
}
})
</script>
</body>
</html>