vue2.0 transition元件實現過渡效果
阿新 • • 發佈：2019-01-21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
*{margin: 0;padding: 0;}
.app{
width: 220px;
height: 310px;
background: #F0F0F0;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
.btn{
display: block;
width: 80px;
height: 30px;
background: #20B060;
color: #FFF;
text-align: center;
line-height: 30px;
outline: none;
border: none;
border-radius: 3px;
margin: 10px 0 0 10px;
}
.container{
width: 200px;
height: 200px;
background: #E0E0E0;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
}
.box{
width:100%;
height:100%;
text-align: center;
line-height: 200px;
background: #ff8282;
color: #Fff;
/*以下兩個預設值，可不寫*/
/*寫上只是為了便於講解，記住這兩個*/
opacity: 1;
margin-left: 0;
}
.box-enter-active,.box-leave-active{
transition: all .8s;
}
.box-enter{
opacity: 0;
margin-top: 100%;
}
.box-leave-active{
opacity: 0;
margin-top: 100%;
}
</style>
</head>
<body>
<div id="app" class="app">
<button @click='showBox=!showBox' class="btn">切換</button>
<div class="container">
<transition name="box">
<div v-show="showBox" class="box">
i am the box
</div>
</transition>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
showBox:false
},
})
</script>
<h2>過渡原理分析</h2>
Vue提供的元件叫transition， <transition name="box"></transition>
<br /><br />
Vue提供的 <transition/> 元件，會在下列四種情況下起作用：
<br />
⑴. 條件渲染（使用v-if）
<br />
⑵. 條件展示（使用了v-show）
<br />
⑶. 動態元件
<br />
⑷. 元件根節點
<br />
在上述的任意一種情況發生的時候（比如：v-show的值為true切換成false的時候），我們可以給 <transition/> 元件包含的節點元素新增entering/leaving過渡動畫效果
<br /><br />
當一個被 <transition/> 元件包含的節點出現了以上的4種情況的任意一種的時候，
Vue自動嗅探目標元素是否應用了 CSS 過渡或動畫，
<br />
如果是，在恰當的時機新增/刪除 CSS 類名。
<br />
所謂的：“在恰當的時機新增/刪除 CSS 類名”，其實是：
<br />
1.v-enter：進入過渡效果（enter）剛剛開始那一刻。在元素被插入或者show的時候生效，在下一個幀就會立刻移除，一瞬間的事。
<br />
2.v-enter-active: 表示進入過渡（entering）的結束狀態。在元素被插入時生效，在 transition/animation 完成之後移除。
<br />
3.v-leave: 離開過渡（leave）的開始那一刻。在離開過渡被觸發時生效，在下一個幀移除，也是一瞬間的事。
<br />
4.v-leave-active：離開過渡（leaving）的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之後移除。
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<style>
*{margin: 0;padding: 0;}
.app{
width: 220px;
height: 310px;
background: #F0F0F0;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
.btn{
display: block;
width: 80px;
height: 30px;
background: #20B060;
color: #FFF;
text-align: center;
line-height: 30px;
outline: none;
border: none;
border-radius: 3px;
margin: 10px 0 0 10px;
}
.container{
width: 200px;
height: 200px;
background: #E0E0E0;
margin: 0 auto;
margin-top: 20px;
overflow: hidden;
}
.box{
width:100%;
height:100%;
text-align: center;
line-height: 200px;
background: #ff8282;
color: #Fff;
/*以下兩個預設值，可不寫*/
/*寫上只是為了便於講解，記住這兩個*/
opacity: 1;
margin-left: 0;
}
.box-enter-active,.box-leave-active{
transition: all .8s;
}
.box-enter{
opacity: 0;
margin-top: 100%;
}
.box-leave-active{
opacity: 0;
margin-top: 100%;
}
</style>
</head>
<body>
<div id="app" class="app">
<button @click='showBox=!showBox' class="btn">切換</button>
<div class="container">
<transition name="box">
<div v-show="showBox" class="box">
i am the box
</div>
</transition>
</div>
</div>
<script>
new Vue({
el:'#app',
data:{
showBox:false
},
})
</script>
<h2>過渡原理分析</h2>
Vue提供的元件叫transition， <transition name="box"></transition>
<br /><br />
Vue提供的 <transition/> 元件，會在下列四種情況下起作用：
<br />
⑴. 條件渲染（使用v-if）
<br />
⑵. 條件展示（使用了v-show）
<br />
⑶. 動態元件
<br />
⑷. 元件根節點
<br />
在上述的任意一種情況發生的時候（比如：v-show的值為true切換成false的時候），我們可以給 <transition/> 元件包含的節點元素新增entering/leaving過渡動畫效果
<br /><br />
當一個被 <transition/> 元件包含的節點出現了以上的4種情況的任意一種的時候，
Vue自動嗅探目標元素是否應用了 CSS 過渡或動畫，
<br />
如果是，在恰當的時機新增/刪除 CSS 類名。
<br />
所謂的：“在恰當的時機新增/刪除 CSS 類名”，其實是：
<br />
1.v-enter：進入過渡效果（enter）剛剛開始那一刻。在元素被插入或者show的時候生效，在下一個幀就會立刻移除，一瞬間的事。
<br />
2.v-enter-active: 表示進入過渡（entering）的結束狀態。在元素被插入時生效，在 transition/animation 完成之後移除。
<br />
3.v-leave: 離開過渡（leave）的開始那一刻。在離開過渡被觸發時生效，在下一個幀移除，也是一瞬間的事。
<br />
4.v-leave-active：離開過渡（leaving）的結束狀態。在離開過渡被觸發時生效，在 transition/animation 完成之後移除。
</body>
</html>