生活随笔
收集整理的這篇文章主要介紹了
VUE之多元素组件过渡+动画封装
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
- （1）多元素過渡
- （2）多組件過渡
- （3）列表過渡
- （4）動畫封裝
多元素過渡
- 首先介紹下如何實現多元素過渡
- （1）利用條件編譯指令v-if與v-else實現多元素內容切換.
- （2）接下來在內容切換基礎上，添加過渡動畫，例如漸隱漸現效果
- 1、transition添加name屬性命名
- 2、設置過渡狀態
- （3）狀態管理
- 測試后發現并沒有過渡效果，分析原因Vue在多個元素切換過程中會盡量復用DOM，如果不加key，那么vue會選擇復用節點(Vue的就地更新策略)，導致之前節點的狀態被保留下來，由此產生一系列的bug.。
- 方案：給多元素添加不同key進行狀態管理，代碼如下
- 多元素過渡-案例練習
- 多元素過渡可以通過v-if條件指令進行控制
- 點擊驗證后發現，在過渡過程中area區域被重繪了，一個離開過渡的時候另一個開始進入過渡。
- 這是 <transition> 的默認行為 - 即進入和離開同時發生。
- 方案：在元素絕對定位時候運行正常：
- 也可以給元素加上轉換屬性，實現滑動過渡的效果
多元素過渡-過渡模式
- 同時生效的進入和離開的過渡不能滿足所有要求，所以 Vue 提供了兩種過渡模式。
- ①in-out：新元素先進行過渡，完成之后當前元素過渡離開（不是經常用到，但對于一些稍微不同的過渡效果還是有用的）
- ②out-in：當前元素先進行過渡，完成之后新元素過渡進入
多組件過渡
- 接下來介紹下多組件實現過渡效果，代碼如下，直接將多元素修改為多組件即可
- 多組件過渡也可以結合動態組件進行操作，首先寫個基礎動態組件案例，如下所示
- 接下來添加transition過渡
列表過渡
- 目前為止，僅僅實現了單個&&多個元素、單個&&多個組件的過渡動畫，接下來介紹下針對列表增刪時做的一些過渡動畫操作。
- （1）首先將基礎架構搭建好，要求點擊按鈕時添加新內容到列表尾部
- （2）目前為止已經實現點擊添加效果，如下所示
- 之前的一些過渡動畫效果都是針對單個元素組件的隱藏展示，或者多個元素組件來回切換的動畫效果，接下來介紹下列表過渡效果，即列表增刪改動數據時的過渡動畫。
- 列表過渡動畫標簽<transition-group></transition-group>
- （1）對于列表過渡需要用到列表過渡標簽transition-group
- （2）定義CSS過渡效果
- 此時再次點擊便實現了列表過渡切換效果
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue多元素組件過渡+動畫封裝</title><script src="js/vue-2.6.9.min.js"></script><style type="text/css">.demo {width: 200px;height: 200px;background: red;}.demo1 {width: 200px;height: 200px;background: green;}.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active,.fade-leave-active {transition: opacity 2s;}.fade-enter-to,.fade-leave {opacity: 1;}</style></head><body><div id="root"><transition name="fade" mode="out-in"><div class="demo" v-if="status" key="one"></div><div class="demo1" v-else key="two"></div></transition><button @click="handleClick">toggle</button></div><script type="text/javascript">var root = new Vue({el: '#root',data: {status: true},methods: {handleClick() {this.status = !this.status;}}})</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue多元素組件過渡</title><script src="js/velocity.js"></script><script src="js/vue-2.6.9.min.js"></script><style type="text/css">/* .demo {width: 200px;height: 200px;background: red;}.demo1{width: 200px;height: 200px;background: green;} */.addTransition-enter,.addTransition-leave-to {opacity: 0;}.addTransition-enter-active,.addTransition-leave-active {transition: opacity 2s;}.addTransition-enter-to,.addTransition-leave {opacity: 1;}</style></head><body><div id="root"><transition-group name="addTransition"><div v-for="list of lists" :key="list.age">姓名:{{list.name}}-----年齡:{{list.age}}</div></transition-group><button @click="handleClick">add</button></div></body><script type="text/javascript">var age = 0;var root = new Vue({el: '#root',data: {lists: [{name: '二狗子',age: 20}]},methods: {handleClick() {this.lists.push({name: '新同學',age: age++})}}})</script>
</html>
動畫封裝
- 前言
- 如果部分效果在頁面里應用較多，可以對其進行動畫封裝，以方便日后調用
- 步驟：
- （1）首先創建基礎動畫，即簡單的顯隱切換動畫，如下所示
- （2）封裝動畫組件
- 這里使用了props傳值&&slot插槽
- 3）調用組件
- 組件內部為了響應slot插槽，所以需要填入對應DOM元素，同時傳入參數
- 目前為止已經實現了對動畫的封裝，可以任意次調用，如下所示
- （4）改良版—JS動畫
- 動畫的封裝不僅可以使用CSS實現，同時也可以借助動畫鉤子，使用JS實現動畫效果。
- 即將如下的CSS動畫代碼也封裝到組件里
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>動畫封裝</title><script src="js/vue-2.6.9.min.js"></script><style type="text/css">.demo {width: 200px;height: 200px;background: red;}.demo1 {width: 200px;height: 200px;background: green;}.fade-enter,.fade-leave-to {opacity: 0;}.fade-enter-active,.fade-leave-active {transition: opacity 2s;}.fade-enter-to,.fade-leave {opacity: 1;}</style></head><body><div id="root"><fade :status="status"><div class="demo">我是展示內容1</div></fade><fade :status="status"><div class="demo1">我是展示內容2</div></fade><button @click="handleClick">toggle</button></div><script type="text/javascript">Vue.component('fade', {props: {status: Boolean},template: `<transition name="fade" model="out-in"><slot v-if="status"></slot></transition>`})var root = new Vue({el: '#root',data: {status: true},methods: {handleClick() {this.status = !this.status;}}})</script></body>
</html>
以上就是Vue多元素過渡以及動畫封裝，如有問題請聯系小編！
總結
以上是生活随笔為你收集整理的VUE之多元素组件过渡+动画封装的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
