版本:vue 2.x
实验对象：一个小demo
demo：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中的简单过渡</title>
<script src="../vue.js"></script>
<style>
#wrapper{
border: 1px solid red;
height: 200px;
margin-top: 200px;
position: relative;
/* overflow: hidden; */
}
.title{
position: absolute;
left: 50%;
top: 100px;
background: blue;
color: aliceblue;
font-size: 20px;
width: 300px;
text-align: center;
line-height: 100px;
}
.fade-enter{
opacity: 0;
transform: translateY(50px);
}
.fade-leave-to {
opacity: 0;
transform: translateY(100px);
}
.fade-enter-active{
transition: all .5s;
}
.fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
</style>
</head>
<body>
<div id="root">
<div id="wrapper">
<transition name="fade">
<div v-if="show" class="title">hello world</div>
</transition>
</div>
<button v-on:click="handleClick">
Toggle
</button>
</div>
<script>
new Vue({
el: '#root',
data: {
show: true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
个人理解：
先出现enter还是leave，由初始显隐状态决定:
如果目标元素刚开始时时隐藏，那么demo效果的会按照先后顺序，出现有两个阶段：1阶段：隐藏->显示 此乃enter; 2阶段 显示->隐藏 此乃leave。故先出现enter，再出现leave
如果目标元素刚开始时时显示，那么demo效果的会按照先后顺序，出现有两个阶段：1阶段：显示->隐藏 此乃leave; 2阶段 隐藏->显示 此乃enter。故先出现leave，再出现enter
以本demo为例,更改show的值分别为true或false。观察出现的效果。
为什么opacity可以控制显隐，个人理解:
由于v-show控制的，实际是display属性在产生作用，如display:none.（但是display:none 和 transition是冲突的。有display:none则不会出现过渡效果）。可是正在使用的明明是v-show，咋办呢？那么所以，要在隐藏->显示或显示->隐藏的过程的第二帧就要给加上一个class。这个class就是v-enter或v-leave. 而这两个class里均有opacity属性。于是乎,就替换了display。 此时class 名为v-enter-active或v--leave-active里的transition属性通过opacity或all检测到有opacity，并监听opacity的变化。当opacity的值发生变化，于是transition产生设定的过渡效果了。此时，整个过程的显隐变成了opacity来控制;
位移效果是以目标元素初始位置决定的：
以本demo为例，enter阶段的位移是指从何处移动到当前位置。leave阶段的位置是指从当前位置移动到何处
本demo总结描述：
-1,如果show的值是false.当点击Toggle按钮时，则先出现enter阶段，再出现leave阶段。在enter阶段的第二帧添加fade-enter的样式,显隐开始交由opacity控制变化,opacity值的走向是0->1,从下方50px处回到初始位置，fade-enter-active里的transform监听到opacity和translateY变化，应用过渡效果
-2，如果show的值是false.当点击Toggle按钮时，则先出现leave阶段，再出现enter阶段。在leave阶段的第二帧添加fade-leave-to的样式,显隐开始交由opacity控制,opacity值的走向是1->0,从初始位置处移到下方100px，fade-leave-active里的transform监听到opacity和translateY变化，应用过渡效果
网友评论