vue3学习14 动画

在开发中，我们想要给一个组件显示和消失添加某种过渡动画，可以很好地增加用户体验。 vue为我们提供一些内置组件和对于的API来完成动画，利用他们我们可以很方便的实现过渡动画效果。 如果我们希望给单元素或者组件实现过渡动画，可以使用transtion内置组件来完成动画。

    <transition name="juju">
      <h2 v-if="isShow">Hello world</h2>
    </transition>
    
    <style scoped>
/* 从透明度为0进入 */
  .juju-enter-from,
  .juju-leave-to{
    opacity: 0;
  }

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

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

此时就完成了元素的淡入淡出

• v-enter-from(v代表transition的name属性):定义进入过渡的开始状态。在元素插入之前生效，在元素被插入之后的下一帧移除
• v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以用来定义进入过渡的过程时间，延迟和曲线函数。
• v-enter-to:定义进入过渡的结束状态。
• v-leave-from:定义离开过渡的开始状态。
• v-leave-active:定义离开过度生效时的状态。

transition属性

    <transition name="juju" mode="out-in" appear>
      <h2 v-if="isShow">Hello world</h2>
    </transition>

mode设置如果有两个元素每次只显示其中一个，是等一个消失完再显示，还是未完全消失就显示。 appear是刚进入页面就显示动画效果

animate.css

animate.css是一个已经准备好的，跨平台的动画库。

1.安装
npm install animate.css
2.在main.js中引入
import "animate.css";
3.使用
  .juju-enter-active {
    animation: bounceInUp 1s ease;
  }
  .juju-leave-active {
    animation: bounceInUp 1s ease reverse;
  }

bounceInUp是从animation.css官网上查询想要实现的动画效果 也可以使用transition自定义类名

<transition name="juju" mode="out-in" enter-active-class="animate__animated animate__fadeInDown">

一些钩子函数

    <transition name="juju" @before-enter="beforeEnter"
                            @enter="enter"
                            @after-enter="afterEnter"
                            @before-leave="beforeLeave"
                            @afterLeave="afterLeave">

某些时刻我们需要使用javascript实现一些动画效果，这时可以使用gsap库完成 如何使用

1.安装gasp库
npm install gsap
2.导入gasp库
import gsap from 'gsap' 
3.使用对应api
      enter(el, done) {
        gsap.from(el,{
          scale: 0,
          x: 200,  //对应translate
          onComplete: done
        })
      },
      leave() {
        gsap.from(el,{
          scale: 0,
          x: 200,  //对应translate
          onComplete: done
        })
      }

enter和leave是transition的钩子函数

利用gsap实现数字递增效果

<template>
        <input type="number" step="100" v-model="counter">
        {{ showCounter }}
</template>
<script>
    import gsap from 'gsap' 
  export default {
    data() {
      return {
        counter: 0,
        showNumber: 0,
      }
    },
    computed: {
      showCounter() {
        return this.showNumber.toFixed(0);
      }
    },
    watch: {
      counter(newVal) {
        gsap.to(this, {
          duration: 1,
          showNumber: newVal
        })
      }
    },

  }
</script>

列表实现过渡效果

<template>
    <div>
      <button @click="addNum">添加数字</button>
      <button @click="removeNum">删除数字</button>
      <transition-group tag="p" name="juju">
        <span v-for="item in numbers" :key="item" class="item">
        {{ item }}</span>
      </transition-group>
    </div>
</template>
<style scoped>
  .item {
    margin-right: 10px;
    display: inline-block;
  }
  .juju-enter-from,
  .juju-leave-to {
    opacity: 0;
    transform: translateY(30px)
  }
  .juju-enter-active,
  .juju-leave-active {
    transition: all 1s ease;
  }
  .juju-leave-active {
    position: absolute;
  }
  .juju-move {
    transition: transform 1s ease
  }
</style>