Vue过渡动画

过渡动画

transition动画

transition是一个内置组件 一般包裹1个元素 可以通过transition来定义从透明度为0到透明度为1的动画，

也可以通过animation @keyframes

同时使用transition和animation 既有放大的效果又有透明度的变化

谁时间长 type就是谁

 <transition name="fade" type="transition">
      <h2 v-if="show" class="title">Hello world</h2>
    </transition>

过渡模式

有2个元素 在这2个元素之间切换

    <transition name="fade" mode="out-in">
      <h2 v-if="show" class="title">Hello world</h2>
      <h2 class="title" v-else>你好啊</h2>
    </transition>

结合第三方css库animate.css

在animate.css中定义好了样式

使用方法一

1.在官网中复制动画名字keyframes

2.结合transition的name，在style里设置animation的keyframes，时间和曲线

.fade-enter-active {
  animation: backOutDown 3s ease;
}
.fade-leave-active {
  animation: backOutDown 3s ease reverse;
}

<transition name="fade" appear>
      <h2 v-if="show" class="title">Hello world</h2>
    </transition>

使用方法二

通过自定义过渡动画类名

 <transition
      enter-active-class="animate__animated animate__pulse"
      leave-active-class="animate__animated animate__headShake"
    >
      <h2 v-if="show" class="title">Hello world</h2>
    </transition>

结合第三方js库gsap

通过JS来实现动画效果

transition组件给我们提供了JS钩子 即在xx阶段会调用的函数

    enter(el, done) {
      console.log("具体的动画");
      //   el就是target,拿到原来的元素，{}达到哪种默认状态
      gsap.from(el, {
        scale: 0,
        x: 100, //transform:translateX(100px)可在官网查看
        onComplete: done,
      });
    },

:css="false" 让css失效