版权声明：未经同意，不得随意转载转载 https://blog.csdn.net/lucky541788/article/details/83049883
过度类名实现动画
1、使用 transition 元素，把需要被动画控制的元素，包裹起来
body
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 1、使用 transition 元素，把需要被动画控制的元素，包裹起来-->
<!-- transition 元素，是 Vue 官方提供的-->
<transition>
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div>
<script>
window.onload = function () {
let vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
}
</script>
2、自定义两组样式，来控制 transition 内部的元素实现动画
css
<style>
/* 2、自定义两组样式，来控制 transition 内部的元素实现动画*/
/* 必须 v- 前缀*/
/* 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>
修改 v- 前缀
- 修改transition中的name属性值，之后css中引用前缀就变为
name属性值- - 这个作用主要是一个页面，不同组件有不同动画时，用于区分动画
1、使用 transition 元素，把需要被动画控制的元素，包裹起来
body
<div id="app">
<input type="button" value="toggle" @click="flag=!flag">
<!-- 1、使用 transition 元素，把需要被动画控制的元素，包裹起来-->
<!-- transition 元素，是 Vue 官方提供的-->
<transition name="my">
<h3 v-if="flag">这是一个H3</h3>
</transition>
</div>
<script>
window.onload = function () {
let vm = new Vue({
el: '#app',
data: {
flag: false
},
methods: {}
});
}
</script>
2、自定义两组样式，来控制 transition 内部的元素实现动画
css
<style>
/* 2、自定义两组样式，来控制 transition 内部的元素实现动画*/
/* 必须 my- 前缀*/
/* my-enter 【这是一个时间点】是进入之前，元素其实状态，此时还没有开始进入*/
/* my-leave-to 【这是一个时间点】是动画离开之后，离开的终止状态，此时，元素动画结束了*/
.my-enter, .my-leave-to {
/* 横向淡入淡出动画*/
opacity: 0;
transform:translateX(150px);
}
/* my-enter-active 【入场动画的时间段】*/
/* my-leave-active 【离场动画的时间段】*/
.my-enter-active, .my-leave-active {
transition: all 1s ease;
}
</style>