Transition

css 动画

animista

animate.css

transition

<Transition name="t"></Transition>

.t-enter-active,
.t-leave-active {
  transition: all 0.5s;
}

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

animation

animista 这里可以定制你的动画

<Transition name="a"></Transition>

.a-enter-active {
  animation: fade-in 0.5s;
}

.a-leave-active {
  animation: fade-in 0.5s reverse;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

class

animate.css 第三方动画库

需要提供一进一出两个 class ，当然也可以像上边一样 reverse 。

<Transition enter-active-class="slide-in" leave-active-class="slide-out"></Transition>

<Transition
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
></Transition>

js 动画

gsap

anime.js

motion

钩子函数

通过钩子函数来调用动画

可以选择性的关闭 css (推荐)

关闭 css 后，回调函数 enter 和 leave 的回调函数 done 就是必须的

<Transition @before-enter="onBeforeEnter" @enter="onEnter" @leave="onLeave" :css="false"></Transition>

import gsap from 'gsap'

function onBeforeEnter(el) {
  gsap.set(el, {
    scaleX: 0.25,
    scaleY: 0.25,
    opacity: 1
  })
}

function onEnter(el, done) {
  gsap.to(el, {
    duration: 1,
    scaleX: 1,
    scaleY: 1,
    opacity: 1,
    ease: 'elastic.inOut(2.5, 1)',
    onComplete: done
  })
}

function onLeave(el, done) {
  gsap.to(el, {
    duration: 0.7,
    scaleX: 1,
    scaleY: 1,
    x: 300,
    ease: 'elastic.inOut(2.5, 1)'
  })
  gsap.to(el, {
    duration: 0.2,
    delay: 0.5,
    opacity: 0,
    onComplete: done
  })
}

其他参数

出现时过渡

初次渲染时

<Transition appear></Transition>

元素间过渡

条件渲染时，元素互斥

<Transition>
  <div v-if="active == 1"></div>
  <div v-else-if="active == 2"></div>
  <div v-else></div>
</Transition>

动态组件，元素互斥

<Transition name="fade" mode="out-in">
  <component :is="activeComponent"></component>
</Transition>

过渡模式

两互斥元素，一个离场，一个入场的过渡效果

离场动画结束后再执行入场动画，或者相反

<Transition mode="out-in"></Transition>