1556411553643.png
1556411583327.png
点击显示，隐藏
<div id="app">
<input type="button" value="帅" @click="flag=!flag">
<h3 v-if="flag">看我帅不帅</h3>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
})
</script>
使用过度类名，实现动画
第一步是将需要动画的元素包裹在transition元素中，transition元素时Vue官方提供的
第二步自定义两组样式
- v-enter和v-leave-to
- v-enter-active和v-leave-active
第一组动画是两个时间点，分别是进入之前和退出之后的时间点，也就是在这两个时间点的期间，以什么样的样式显示
第二组动画是两个时间段，也就是入场动画和出场动画的时间段，也就是这个地方选择动画的元素，选择动画作用的事件，选择作用的样式
/*<!-- v-enter，是一个时间点，是进入之前，元素的起始状态，此时还没开始进入-->*/
/*v-leave-to，也是一个时间点是动画离开之后，离开的 终止状
态，此时元素动画已经结束了*/
/* v-enter-active是入场动画的时间 段 ， */
/* v-leave-active是出场动画的时间 段 ， */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../../js/vue.js"></script>
<style>
.v-enter,
.v-leave-to{
opacity: 0;
}
.v-enter-active,
.v-leave-active{
transition: all 0.4s ease-in;
}
</style>
</head>
<body>
<div id="app">
<input type="button" value="帅" @click="flag=!flag">
<transition>
<h3 v-if="flag">看我帅不帅</h3>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{
flag:false
},
})
</script>
</body>
</html>
transform: translateX(150px);
是动画的位移
transition要求必须带v做前缀
但是也可以改变
.my-enter,
.my-leave-to{
opacity: 0;
transform: translateX(150px);
}
.my-enter-active,
.my-leave-active{
transition: all 0.4s ease-in;
}
网友评论