详情可见
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>28-Vue-过渡动画</title>
<script src="js/vue.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
}
.v-enter{
opacity: 0;
}
.v-enter-to{
opacity: 1;
}
.v-enter-active{
transition: all 3s;
}
.v-leave{
opacity: 1;
}
.v-leave-to{
opacity: 0;
}
.v-leave-active{
transition: all 3s;
}
</style>
</head>
<body>
<!--
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中指定动画执行的状态
即可完成过渡动画
-->
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="toggle">我是按钮</button>
<transition>
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
toggle(){
this.isShow = !this.isShow;
}
},
computed: {
}
});
</script>
</body>
</html>
<!--
1.transition注意点:
transition中只能放一个元素, 多个元素无效
如果想给多个元素添加过渡动画, 那么就必须创建多个transition组件
2.初始动画设置
默认情况下第一次进入的时候没没有动画的
如果想一进来就有动画, 我们可以通过给transition添加appear属性的方式
告诉Vue第一次进入就需要显示动画
3.如何给多个不同的元素指定不同的动画
如果有多个不同的元素需要执行不同的过渡动画,那么我们可以通过给transition指定name的方式
来指定"进入之前/进入之后/进入过程中, 离开之前/离开之后/离开过程中"对应的类名
来实现不同的元素执行不同的过渡动画
-->
<!--这里就是MVVM中的View-->
<div id="app">
<button @click="toggle">我是按钮</button>
<transition appear name="one">
<div class="box" v-show="isShow"></div>
<!-- <div class="box" v-show="isShow"></div>-->
</transition>
<transition appear name="two">
<div class="box" v-show="isShow"></div>
</transition>
</div>
<script>
let vue = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
toggle(){
this.isShow = !this.isShow;
}
},
computed: {
}
});
</script>