Vue3+TS Day14 - transition组件、ani

一、Vue的Transition动画

1、动画的作用（练表达能力）？

• 可以让应用操作更加顺滑，增加用户体验。

image.png

2、如何在vue中使用transition动画？

image.png image.png image.png

3、transition组件的动画原理？

• ①自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
• ②如果transition组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；
• ③如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；

image.png

4、前面通过transition来实现的动画效果，我们也可以通过animation来实现。

image.png image.png

5、transition组件的一些属性，主要掌握mode（其他了解）。

image.png image.png image.png image.png

二、animate.css库

1、为什么要使用 animate.css 库？

image.png

2、如何在Vue项目中使用animate.css?

image.png image.png

三、gsap库

1、我们已经学会使用animate.css库了，为什么还要使用 gsap库？

• animate.css是css动画，gsap是js动画，所以gsap有更大的灵活性。

image.png

2、认识transition组件的钩子？

image.png

3、gsap库的使用？

image.png image.png

四、transition-group 动画组

1、transition-group 与 transition有什么区别？

• transition要么是单个节点，要么是同一时间渲染多个节点中的一个；
• 如果希望渲染的是一个列表，并且该列表中添加删除数据也希望有动画执行，就要使用 transition-group

image.png

2、transition-group的基本使用？

image.png image.png image.png

// 01_transition-group的使用.vue
<template>
  <div>
    <button @click="addNum">添加数字</button>
    <button @click="removeNum">删除数字</button>
    <button @click="shuffleNum">数字洗牌</button>

    <transition-group tag="p" name="why">
      <span v-for="item in numbers" :key="item" class="item">
        {{item}}
      </span>
    </transition-group>
  </div>
</template>

<script>
  import _ from 'lodash';

  export default {
    data() {
      return {
        numbers: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
        numCounter: 10
      }
    },
    methods: {
      addNum() {
        // this.numbers.push(this.numCounter++)
        this.numbers.splice(this.randomIndex(), 0, this.numCounter++)
      },
      removeNum() {
        this.numbers.splice(this.randomIndex(), 1)
      },
      shuffleNum() {
        this.numbers = _.shuffle(this.numbers);
      },
      randomIndex() {
        return Math.floor(Math.random() * this.numbers.length)
      }
    },
  }
</script>

<style scoped>
  .item {
    margin-right: 10px;
    display: inline-block;
  }

  .why-enter-from,
  .why-leave-to {
    opacity: 0;
    transform: translateY(30px);
  }

  .why-enter-active,
  .why-leave-active {
    transition: all 1s ease;
  }

  .why-leave-active {
    position: absolute;
  }

  .why-move {
    transition: transform 1s ease;
  }
</style>

• 02_列表的交替动画.vue

// 02_列表的交替动画.vue

<template>
  <div>
    <input v-model="keyword">
    <transition-group tag="ul" name="why" :css="false"
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @leave="leave">
      <li v-for="(item, index) in showNames" :key="item" :data-index="index">
        {{item}}
      </li>
    </transition-group>
  </div>
</template>

<script>
  import gsap from 'gsap';

  export default {
    data() {
      return {
        names: ["abc", "cba", "nba", "why", "lilei", "hmm", "kobe", "james"],
        keyword: ""
      }
    },
    computed: {
      showNames() {
        return this.names.filter(item => item.indexOf(this.keyword) !== -1)
      }
    },
    methods: {
      beforeEnter(el) {
        el.style.opacity = 0;
        el.style.height = 0;
      },
      enter(el, done) {
        gsap.to(el, {
          opacity: 1,
          height: "1.5em",
          delay: el.dataset.index * 0.5,
          onComplete: done
        })
      },
      leave(el, done) {
        gsap.to(el, {
          opacity: 0,
          height: 0,
          delay: el.dataset.index * 0.5,
          onComplete: done
        })
      }
    }
  }
</script>

<style scoped>
</style>