|
大家好，我是VHotDog,，熱狗得小癩皮狗,！
目錄
最近看一個項目源碼時，竟然發(fā)現(xiàn)這一篇我竟然沒有看,，竟然不知道,，不知道！??！
然后我就去官網(wǎng)康了一下。他是這亞子說的
概述
Vue 在插入,、更新或者移除 DOM 時,，提供多種不同方式的應(yīng)用過渡效果。包括以下工具：
在 CSS 過渡和動畫中自動應(yīng)用 class
可以配合使用第三方 CSS 動畫庫,，如 Animate.css
在過渡鉤子函數(shù)中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 動畫庫,，如 Velocity.js
過渡效果大家都曉得吧。
CSS3中,，我們?yōu)榱颂砑幽撤N效果可以從一種樣式轉(zhuǎn)變到另一個的時候,，無需使用Flash動畫或JavaScript。
css3過渡簡寫屬性：transition: 用于過渡的屬性 時間 速度變化效果 延遲時間;
不過呢,，嘿嘿,。Vue幫我們封裝好了?。?/p>
過渡
Vue 提供了 transition 的封裝組件,，在下列情形中,，可以給任何元素和組件添加進入/離開過渡.
條件渲染 (使用 v-if)
條件展示 (使用 v-show)
動態(tài)組件
組件根節(jié)點
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn./npm/vue/dist/vue.js"></script>
</head>
<style>
.dog-enter-active, .dog-leave-active { // vue提供的過度類名。下面會講
transition: opacity .5s;
}
.dog-enter, .dog-leave-to {
opacity: 0;
}
</style>
<body>
<div id ="app">
<button v-on:click="show = !show"> // 點擊時,，show值會true false變換
按鈕
</button>
<transition name="dog"> // 自己定義的名稱哦
<p v-if="show">hello vue</p>
</transition>
</div>
</body>
<script>
//創(chuàng)建Vue實例,得到 ViewModel
let vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {}
});
</script>
</html>
可以實現(xiàn)點擊”按鈕“時,，下面文字(hello vue)'淡入淡出’的效果。
過渡類名
在進入/離開的過渡中,，會有 6 個 class 切換,。(下面的v是默認的前綴)
opacity(透明度)
1.v-enter：定義進入過渡的開始狀態(tài)。在元素被插入之前生效,，在元素被插入之后的下一幀移除,。
2.v-enter-active：定義進入過渡生效時的狀態(tài)。在整個進入過渡的階段中應(yīng)用,，在元素被插入之前生效,，在過渡/動畫完成之后移除。這個類可以被用來定義進入過渡的過程時間,，延遲和曲線函數(shù),。
3. v-enter-to：2.1.8 版及以上定義進入過渡的結(jié)束狀態(tài)。在元素被插入之后下一幀生效 (與此同時 v-enter 被移除),，在過渡/動畫完成之后移除,。
4. v-leave：定義離開過渡的開始狀態(tài)。在離開過渡被觸發(fā)時立刻生效,，下一幀被移除,。
5. v-leave-active：定義離開過渡生效時的狀態(tài)。在整個離開過渡的階段中應(yīng)用,，在離開過渡被觸發(fā)時立刻生效,，在過渡/動畫完成之后移除。這個類可以被用來定義離開過渡的過程時間,，延遲和曲線函數(shù),。
6. v-leave-to：2.1.8 版及以上定義離開過渡的結(jié)束狀態(tài)。在離開過渡被觸發(fā)之后下一幀生效 (與此同時 v-leave 被刪除),，在過渡/動畫完成之后移除,。
如果你使用一個沒有名字的 ，則 v- 是這些類名的默認前綴,。如果你使用了 ,，那么 v-enter 會替換為 dog-enter。
動畫
動畫和過渡的用法相同,，區(qū)別是在動畫中 v-enter 類名在節(jié)點插入 DOM 后不會立即刪除,，而是在 animationend 事件觸發(fā)時刪除,。
css3動畫簡寫屬性：animation 綁定的keyframe名 花費時間 速度變化效果 延遲 播放次數(shù) 是否反向;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn./npm/vue/dist/vue.js"></script>
</head>
<style>
.dog-enter-active {
animation: move .5s;
}
.dog-leave-active {
animation: move .5s reverse;
}
@keyframes move {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
</style>
<body>
<div id ="app">
<button @click="show = !show">按鈕</button>
<transition name="dog">
<p v-if="show">字數(shù)長一點，效果更好哦??！</p>
</transition>
</div>
</body>
<script>
//創(chuàng)建Vue實例,得到 ViewModel
let vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {}
});
</script>
</html>
貌似有點生命周期那個味了呀。
transition屬性介紹
name
用于自動生成 CSS 過渡類名,。例如：name: dog將自動拓展為 .dog-enter ,，.dog-enter-active等。默認類名為 “v”
appear
是否在初始渲染時使用過渡,。默認為 false,。
css
是否使用 CSS 過渡類。默認為 true,。如果設(shè)置為 false，將只通過組件事件觸發(fā)注冊的 JavaScript 鉤子,。
type
指定過渡事件類型,，偵聽過渡何時結(jié)束。有效值為 “transition” 和 “animation”,。默認 Vue.js 將自動檢測出持續(xù)時間長的為過渡事件類型,。
mode
控制離開/進入的過渡時間序列。有效的模式有 “out-in” 和 “in-out”,；默認同時生效,。
duration
指定過渡的持續(xù)時間。
可以用 組件上的 duration 屬性定制一個顯性的過渡持續(xù)時間 (以毫秒計)：
<transition :duration="1000">...</transition>
也可以定制進入和移出的持續(xù)時間：
<transition :duration="{ enter: 500, leave: 800 }">...</transition>
注意
同時使用過渡和動畫時,，需要使用 type 特性并設(shè)置 animation 或 transition 來明確聲明你需要 Vue 監(jiān)聽的類型,。
因為瀏覽器并不知道使用的是animate的時長，還是transition的時長,。假如整體使用transition的時長
<transition name="dog" type='transition'">...</transition>
來源：https://www./content-4-775951.html
|
