过度类名实现动画
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 官方提供的-->
<!-- 通过 mode(模式) = "out-in" 实现前一个动画结束再进行下一个动画,一般用于动画切换-->
<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>