快捷導(dǎo)航

Vue前端開發(fā)之實現(xiàn)交錯過渡動畫效果

更新時間：2024年11月13日 11:30:34 作者：川石教育

這篇文章主要為大家詳細(xì)介紹了如何通過Vue實現(xiàn)交錯過渡動畫效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

前言

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

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

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

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

1. 功能描述

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

2. 實現(xiàn)代碼

在項目components 文件夾的ch5子文件夾中，添加一個名為“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>