Vue中实现过渡动画
1.如何给Vue控制的元素添加过渡动画
1.1将需要执行动画的元素放在transition组件中
1.2当transition组件中的元素显示时会自动查找.v-enter/.v-enter-active/.v-enter-to类名
当transition组件中的元素隐藏时会自动查找.v-leave/.v-leave-active/.v-leave-to类名
1.3我们只需要在.v-enter和.v-leave-to中指定动画开始的状态
在.v-enter-active和.v-leave-active中指定动画执行的状态
即课可完成过渡动画
注意点:
1.多个元素添加过渡动画
transition只能放一个元素,多个元素无效
如果想给多个元素添加过渡动画,那么就必须创建多个transition组件
2.初始动画设置
默认情况下第一次进入的时候没有动画
如果想一进来就有动画,我们可以通过给transition添加appear属性的方式
告诉Vue第一次进来就需要显示动画
3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画**
<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>