Vue3.0+TS

Vue3+TS Day14 - transition组件、ani

2021-12-09  本文已影响0人  望穿秋水小作坊

一、Vue的Transition动画

1、动画的作用(练表达能力)?

image.png

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

image.png image.png image.png

3、transition组件的动画原理?

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库

image.png

2、认识transition组件的钩子?

image.png

3、gsap库的使用?

image.png image.png

四、transition-group 动画组

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

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

<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>
上一篇 下一篇

猜你喜欢

热点阅读