Vue 3 动画

过渡动画的基本使用，一个元素的显示和隐藏切换

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <transition name="why">
      <h2 v-if="isShow">Hello World</h2>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    }
  }
</script>

<style scoped>
  .why-enter-from,
  .why-leave-to {
    opacity: 0;
  }

  .why-enter-to, 
  .why-leave-from {
    opacity: 1; //这个其实是每个元素的默认值，因此可以省略
  }

  .why-enter-active,
  .why-leave-active {
    transition: opacity 2s ease;
  }
</style>

 两个元素的切换和隐藏

<template>
  <div class="app">
    <div><button @click="isShow = !isShow">显示/隐藏</button></div>

    <transition name="why" mode="out-in">
      <h2 class="title" v-if="isShow">Hello World</h2>
      <h2 class="title" v-else>你好啊,李银河</h2>
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    }
  }
</script>

<style scoped>
  .app {
    width: 200px;
    margin: 0 auto;
  }

  .title {
    display: inline-block;
  }

  .why-enter-from,
  .why-leave-to {
    opacity: 0;
  }

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

  .why-enter-active {
    animation: bounce 1s ease;
  }

  .why-leave-active {
    animation: bounce 1s ease reverse;
  }

  @keyframes bounce {
    0% {
      transform: scale(0)
    }

    50% {
      transform: scale(1.2);
    }

    100% {
      transform: scale(1);
    }
  }
</style>

动画结合 animate css 库来使用，不用再自己手写css 代码

<template>
  <div class="app">
    <div><button @click="isShow = !isShow">显示/隐藏</button></div>

    <transition enter-active-class="animate__animated animate__fadeInDown"
                leave-active-class="animate__animated animate__flipInY">
      <h2 class="title" v-if="isShow">Hello World</h2>
注意 这里的  animate__animated 是必须写的， 后面的写上自己想要的效果即可
    </transition>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true
      }
    }
  }
</script>

<style scoped>
  .title {
    display: inline-block;
    /*transform: translateX(100px)*/
  }

  .animate__flipInY {
    animation-direction: reverse;
  }

  /* .why-enter-active {
    animation: bounceInUp 1s ease-in;
  }

  .why-leave-active {
    animation: bounceInUp 1s ease-in reverse;
  } */
</style>

gasp 库 

这个是 js 的一个库，用来实现动画效果

js 实现相同元素的隐藏和显示

利用的是 transition 控件的钩子函数来实现

@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
@before-leave="beforeLeave"
@leave="leave"
@afterLeave="afterLeave"

<template>
  <div class="app">
    <div><button @click="isShow = !isShow">显示/隐藏</button></div>

    <transition @enter="enter"
                @leave="leave"
                :css="false">
      <h2 class="title" v-if="isShow">Hello World</h2>
    </transition>
  </div>
</template>

<script>
  import gsap from 'gsap';

  export default {
    data() {
      return {
        isShow: true,
      }
    },
    methods: {
      enter(el, done) {
        console.log("enter");
        gsap.from(el, {
          scale: 0,
          x: 200,
          onComplete: done
        })
      },
      leave(el, done) {
        console.log("leave");
        gsap.to(el, {
          scale: 0,
          x: 200,
          onComplete: done
        })
      }
    }
  }
</script>

<style scoped>
  .title {
    display: inline-block;
  }
</style>

数字递增动画

<template>
  <div class="app">
    <input type="number" step="100" v-model="counter">
    <!-- <h2>当前计数: {{showCounter}}</h2> -->
    <h2>当前计数: {{showNumber.toFixed(0)}}</h2>
  </div>
</template>

<script>
  import gsap from 'gsap';

  export default {
    data() {
      return {
        counter: 0,
        showNumber: 0
      }
    },
    // computed: {
    //   showCounter() {
    //     return this.showNumber.toFixed(0);
    //   }
    // },
    watch: {
      counter(newValue) {
        gsap.to(this, {duration: 1, showNumber: newValue})
      }
    }
  }
</script>

<style scoped>
</style>

列表动画 transition-group

<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}}
        这里的 tag p 意思是这些 列表 span 外层是放在一个 p 里面的
        name="why" 用于下边定义动画的类 .why-
      </span>
    </transition-group>
  </div>
</template>

<script>
  import _ from 'lodash';

  //引用这个 js 库之前需要安装，我们想要用这个库里边的洗牌功能来打乱一个数组

  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>

列表的交替动画

<template>
  <div>
    <input v-model="keyword">
    <transition-group tag="ul" name="why" :css="false"
                      @before-enter="beforeEnter"
                      @enter="enter"
                      @leave="leave">

                      <!-- 
name="why" 这个是用于 css 实现动画效果的 css 里写一些 .why-....

:css="false" 这个是

钩子函数
@before-enter="beforeEnter" 在进入之前的动画
@enter="enter" 进入动画
@leave="leave" 离开动画
                      -->
      <li v-for="(item, index) in showNames" :key="item" :data-index="index">
        {{item}}
        <!--
:data-index="index"
这里绑定这样设置，钩子函数中的 el 才能拿到 el.dataset.index
         -->
      </li>
    </transition-group>
  </div>
</template>

<script>
  import gsap from 'gsap';
  //这个是 js 的一个库，用来实现动画效果

  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>
  /* 用 css 实现的动画是大家一起出现和大家一起消失，效果很生硬，因此我们改成用 js 来实现

     想要列表实现一个一个交替消失或出现，还是得用 js 来实现 

  .why-enter-from,
  .why-leave-to {
    opacity: 0;
  }

  .why-enter-active,
  .why-leave-active {
    transition: opacity 1s ease;
  } */
</style>