前言

通過自定義CSS樣式實(shí)現(xiàn)的動(dòng)畫效果非常有限，還面臨瀏覽器的兼容性問題，因此，如果需要實(shí)現(xiàn)一些復(fù)雜的動(dòng)畫效果，通常需要引入第三方庫來實(shí)現(xiàn)，而gsap動(dòng)畫平臺(tái)則是一個(gè)非常不錯(cuò)的選擇，該平臺(tái)不僅支持簡單的動(dòng)畫效果，而且還能實(shí)現(xiàn)復(fù)雜的列表動(dòng)畫。

gsap 平臺(tái)可以針對(duì)所有的JavaScript 操作實(shí)現(xiàn)動(dòng)畫效果，在transition-group組件中，為了監(jiān)聽動(dòng)畫執(zhí)行的過程，提供了許多鉤子函數(shù)，它們的功能如下表5-2所示。

需要說明的是，在enter 和 leave 函數(shù)中，需要調(diào)用第二個(gè)參數(shù) done，用于通知Vue框架，對(duì)應(yīng)鉤子函數(shù)的動(dòng)畫已經(jīng)執(zhí)行完成。

借助gsap動(dòng)畫平臺(tái)，可以實(shí)現(xiàn)列表中各個(gè)元素的交錯(cuò)切換的動(dòng)畫效果，所謂的“交錯(cuò)”，指的是多個(gè)元素在執(zhí)行動(dòng)畫效果時(shí)，并不是一起執(zhí)行，而是一個(gè)接一個(gè)的排列執(zhí)行行。接下來通過一個(gè)簡單的示例來演示使用gsap實(shí)現(xiàn)交錯(cuò)切換顯示的動(dòng)畫列表效果。
實(shí)例5-7 列表中的交錯(cuò)效果

1. 功能描述

在頁面模板中，分別添加一個(gè)文本框和一個(gè)列表元素，用戶在文本框中輸入內(nèi)容時(shí)，模糊查詢的內(nèi)容則顯示在列表中，當(dāng)變更文本框內(nèi)容時(shí)，列表內(nèi)容則以交錯(cuò)切換的動(dòng)畫方式進(jìn)行同步展示，文本框內(nèi)容為空時(shí)，則隱藏列表內(nèi)容。

2. 實(shí)現(xiàn)代碼

在項(xiàng)目components 文件夾的ch5子文件夾中，添加一個(gè)名為“GsapGroup”的.vue文件，在文件中加入如清單5-7所示代碼。

代碼清單5-7 GsapGroup.vue代碼

<template>
  <div class="action">
    <div class="act">
      <input type="text" v-model="search">
    </div>
    <transition-group name="list" tag="ul" 
      @before-enter="beforeEnter" 
      @enter="handleEnter" 
      @leave="handleLeave">
      <li v-for="item in showUsers" :key="item"
	     :data-index="index">
        {{ item }}
      </li>
    </transition-group>
  </div>
</template>
 
<script>
import gsap from 'gsap'
export default {
  name: "TransGroup",
  data() {
    return {
      search: '',
      users: ['張三', '李四', '李小四', '張明明', '陳小豐']
    };
  },
  computed: {
    showUsers() {
      if (this.search) {
        return this.users.filter(user => 
		user.includes(this.search))
      } else {
        return [];
      }
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.height = '0px'
      el.style.opacity = '0'
    },
    handleEnter(el, done) {
      gsap.to(el, {
        height: '1.5em',
        opacity: 1,
        delay: el.dataset.index * 0.1,
        onComplete: done
      })
    },
    handleLeave(el, done) {
      gsap.to(el, {
        height: 0,
        opacity: 0,
        delay: el.dataset.index * 0.1,
        onComplete: done
      })
    }
  }
};
</script>
<style scoped>
ul {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  width: 188px;
}
ul li {
  padding: 2px 0;
}
.action {
  width: 188px;
}
.action .act input {
  padding: 8px;
}
</style>

3. 頁面效果

保存代碼后，頁面在Chrome瀏覽器下執(zhí)行的頁面效果如圖5-8所示。

4. 源碼分析

在上述示例模板代碼中，transition-group組件分別綁定了before-enter、enter和leave三個(gè)鉤子函數(shù)，在before-enter函數(shù)中，動(dòng)畫元素高度和透明度都為0，即初始化動(dòng)畫元素。

然后，在執(zhí)行enter函數(shù)時(shí)，設(shè)置動(dòng)畫元素的高度值，并將透明度設(shè)置為1，表示顯示該元素，同時(shí)，獲取元素傳入的index值，作為計(jì)算動(dòng)畫延時(shí)值的一部分，這種計(jì)算方式使每行的延時(shí)效果更加均勻，動(dòng)畫執(zhí)行更加流暢。

此外，當(dāng)動(dòng)畫完成后，一定要在onComplete方法中執(zhí)行傳入的 done 函數(shù)，用于通知Vue 框架，對(duì)應(yīng)階段的動(dòng)畫已執(zhí)行完成。

最后，執(zhí)行 leave 與 enter函數(shù)的流程基本相似，只是在leave 函數(shù)中會(huì)將動(dòng)畫元素的高度和透明度的值都設(shè)置為0，表示隱藏該元素。

到此這篇關(guān)于Vue前端開發(fā)之實(shí)現(xiàn)交錯(cuò)過渡動(dòng)畫效果的文章就介紹到這了,更多相關(guān)Vue交錯(cuò)過渡動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論