<dfn id="sm46c"></dfn>
2020-5-21 seo達人
原始transition組件和CSS
定義transition的最簡單方法是使用transition·或transition-group 組件。這需要為transition定義一個name`和一些CSS。
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
show: true
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
圖片描述
看起來容易,對吧?然而，這種方法有一個問題。我們不能在另一個項目中真正重用這個transition。
封裝transition組件
如果我們將前面的邏輯封裝到一個組件中，并將其用作一個組件，結果會怎樣呢？
// FadeTransition.vue
<template>
<transition name="fade">
<slot></slot>
</transition>
</template>
<script>
export default {
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle transition
</button>
<fade-transition>
<div v-if="show" class="box"></div>
</fade-transition>
</div>
</template>
<script>...</script>
<style>...</style>
圖片描述
通過在transition組件中提供一個slot，我們幾乎可以像使用基本transition組件一樣使用它。這比前面的例子稍微好一點，但是如果我們想要傳遞其他特定于transition的prop，比如mode或者一些hook，該怎么辦呢
封裝的包裝器transition組件
幸運的是，Vue 中有一個功能，使我們可以將用戶指定的所有額外props和監聽器傳遞給我們的內部標簽/組件。 如果你還不知道，則可以通過$attrs訪問額外傳遞的 props，并將它們與v-bind結合使用以將它們綁定為props。 這同樣適用于通過$listeners進行的事件，并通過v-on對其進行應用。
// FadeTransition.vue
<template>
<transition name="fade" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</transition>
</template>
<script>
export default {};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
...
<fade-transition mode="out-in">
<div key="blue" v-if="show" class="box"></div>
<div key="red" v-else class="red-box"></div>
</fade-transition>
...
圖片描述
完整事例地址：https://codesandbox.io/s/yjl1...
現在，我們可以傳遞普通transition組件可以接受的任何事件和支持，這使得我們的組件更加可重用。但為什么不更進一步，增加通過 prop 輕松定制持續時間的可能性。
顯式持續時間 prop
Vue 為transition組件提供了一個duration prop，然而，它是為更復雜的動畫鏈接而設計的，它幫助 Vue 正確地將它們鏈接在一起。
在我們的案例中，我們真正需要的是通過組件prop控制CSS animation/transition。 我們可以通過不在CSS中指定顯式的CSS動畫持續時間，而是將其作為樣式來實現。 我們可以借助transition hook來做到這一點，該transition hook與組件生命周期 hook 非常相似，但是它們在過渡所需元素之前和之后被調用。 讓我們看看效果如何。
// FadeTransition.vue
<template>
<transition name="fade"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
}
},
computed: {
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
</style>
圖片描述
完整事例地址：https://codesandbox.io/s/j4qn...
現在，我們可以控制實際的可見過渡時間，這使我們可重用的過渡變得靈活且易于使用。 但是，如何過渡多個元素（如列表項）呢？
Transition group 支持
你想到的最直接的方法可能是創建一個新組件，比如fade-transition-group，然后將當前transition標簽替換為transition-group標簽，以實現 group transition。如果我們可以在相同的組件中這樣做，并公開一個將切換到transition-group實現的group prop，那會怎么樣呢?幸運的是，我們可以通過render函數或component和is屬性來實現這一點。
// FadeTransition.vue
<template>
<component :is="type"
:tag="tag"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
move-class="fade-move"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</component>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
},
group: {
type: Boolean,
default: false
},
tag: {
type: String,
default: "div"
}
},
computed: {
type() {
return this.group ? "transition-group" : "transition";
},
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
leave: this.setAbsolutePosition,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
},
setAbsolutePosition(el) {
if (this.group) {
el.style.position = "absolute";
}
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
.fade-move {
transition: transform 0.3s ease-out;
}
</style>
// App.vue
...
<div class="box-wrapper">
<fade-transition group :duration="300">
<div class="box"
v-for="(item, index) in list"
@click="remove(index)"
:key="item"
>
</div>
</fade-transition>
</div>
...
圖片描述
完整事例地址：https://codesandbox.io/s/pk9r...
文檔中介紹了一個帶有transition-group元素的警告。 我們基本上必須在元素離開時將每個項目的定位設置為absolute，以實現其他項目的平滑移動動畫。 我們也必須添加一個move-class并手動指定過渡持續時間，因為沒有用于移動的 JS hook。我們將這些調整添加到我們的上一個示例中。
再做一些調整，通過在mixin中提取 JS 邏輯，我們可以將其應用于輕松創建新的transition組件，只需將其放入下一個項目中即可。
Vue Transition
在此之前描述的所有內容基本上都是這個小型 transition 集合所包含的內容。它有 10 個封裝的transition組件，每個約1kb(縮小)。我認為它非常方便，可以輕松地在不同的項目中使用。你可以試一試:)
總結
我們從一個基本的過渡示例開始，并最終通過可調整的持續時間和transition-group支持來創建可重用的過渡組件。 我們可以使用這些技巧根據并根據自身的需求創建自己的過渡組件。 希望讀者從本文中學到了一些知識，并且可以幫助你們建立功能更好的過渡組件。