Vue中实现过渡动画
1. How to add transition animation to the elements controlled by Vue
1.1 Put the elements that need to be animated in the transition component
1.2 When the elements in the transition component are displayed, they will automatically find .v-enter/.v-enter-active/.v- enter-to class name
When the element in the transition component is hidden, it will automatically find the .v-leave/.v-leave-active/.v-leave-to class name
1.3 We only need to enter the .v-enter and .v-leave Specify the start state of the animation in -to. Specify the state of
animation execution in .v-enter-active and .v-leave-active. The
transition animation can be completed in class.
Note:
1.
Only one transition animation can be added to multiple elements. Element, multiple elements are invalid.
If you want to add transition animations to multiple elements, you must create multiple transition components
2. Initial animation settings
By default, there is no animation
when you enter for the first time. If you want to have animation as soon as you enter, we can By adding the appear attribute to the transition,
tell Vue that it needs to display the animation the first time it comes in
3. How to specify different animations
for multiple different elements If there are multiple different elements that need to perform different transition animations, then we can pass to Transition specifies the name
to specify the corresponding class name of "before entering/after entering/in the process of entering, before leaving/after leaving/in the process of leaving"
to implement different transition animations for different elements**
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.one-enter{
opacity: 0;
}
.one-enter-to{
opacity: 1;
margin-left: 500px;
}
.one-enter-active{
transition: all 3s;
}
.two-enter{
opacity: 0;
}
.two-enter-to{
opacity: 1;
margin-top: 500px;
}
.two-enter-active{
transition: all 3s;
}
</style>
<div id="app">
<button @click="toggle">我是按钮</button>
<transition appear name="one">
<div class="box" v-show="isShow"></div>
</transition>
<transition appear name="two">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
//1.创建一个Vue的实例对象
let vue = new Vue({
//2.告诉Vue的实例对象,将来需要控制界面上的哪个区域
el:'#app',
//3.告诉Vue的实例对象,被控制区域的数据是什么
data:{
isShow:true
},
//专门用于存储监听事件回调函数
methods:{
toggle(){
this.isShow = !this.isShow
}
},
//专门用于定义计算属性的
computed:{
}
});
</script>