Transition 初步使用

Transition

Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡:

条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
自定义 transition 过度效果，你需要对transition组件的name属性自定义。并在css中写入对应的样式

1.过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

过渡 class

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter-from：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter-from 被移除)，在过渡/动画完成之后移除。

v-leave-from：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave-from 被移除)，在过渡/动画完成之后移除。
基本使用

<template>
  <div>
    <button @click="toggle">切换</button>
    <Transition name="fade">
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
       <Register v-else></Register>
      </keep-alive>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import Login from './components/Login.vue';
import Register from './components/register.vue';
import { ref } from 'vue'
const flag = ref(false)
const toggle = () => {
  flag.value = !flag.value
}
</script>

<style scoped>
  /* 进入开始时刻 */
.fade-enter-from {
  width: 0;
  height: 0;
  transform: rotate(360deg);
}
/* 过度中 */
.fade-enter-active {
  transition: all 1s ease;
}
/* 进入完成 */
.fade-enter-to {
  width: 300px;
  height: 300px;
}
.fade-leave-from{
  width: 300px;
  height: 300px;
  transform: rotate(360deg);
}

.fade-leave-active{
  transition: all 3s ease;
}

.fade-leave-to{
  width: 0;
  height: 0;
}

.fade-enter-from {}
</style>

自定义过渡类名

<template>
  <div>
    <button @click="toggle">切换</button>
    <Transition name="fade" fade-enter-from="fade-in">
      <!-- 自定义过渡类名 -->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
        <Register v-else></Register>
      </keep-alive>
    </Transition>
  </div>
</template>

<style scoped>
.fade-in {
  /* 自定义类名 */
  width: 0;
  height: 0;
  transform: rotate(360deg);
}
</style>

区别就是 可以结合一些第三方的类库去使用

比如：

自定义过度类名 结合 Animate.css动画库

Animate.css | A cross-browser library of CSS animations.

使用方式参考官方说明文档

    <Transition enter-active-class="animate__animated animate__rotateIn">
      <!-- 自定义过渡类名 -->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
        <Register v-else></Register>
      </keep-alive>
    </Transition>

duration自定义过渡时间

自定义过度时间 单位毫秒

你也可以分别指定进入和离开的持续时间：

<transition :duration="1000">...</transition>
 
 
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

生命周期

@before-enter="beforeEnter" //对应enter-from
@enter="enter"//对应enter-active
@after-enter="afterEnter"//对应enter-to
@enter-cancelled="enterCancelled"//显示过度打断
@before-leave="beforeLeave"//对应leave-from
@leave="leave"//对应enter-active
@after-leave="afterLeave"//对应leave-to
@leave-cancelled="leaveCancelled"//离开过度打断

<template>
  <div>
    <button @click="toggle">切换</button>
    <Transition
      :duration="{ enter: 1000, leave: 0 }"
      enter-active-class="animate__animated animate__rotateIn"
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
      @enter-cancelled="enterCancelled"
      @before-leave="beforeLeave"
      @leave="leave"
      @after-leave="afterLeave"
      @leave-cancelled="leaveCancelled"
    >
      <!-- 自定义过渡类名 -->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
      </keep-alive>
    </Transition>
  </div>
</template>

<script setup lang="ts">
  import 'animate.css'
  import Login from './components/Login.vue'
  import Register from './components/register.vue'
  import { ref } from 'vue'
  const flag = ref(false)
  const toggle = () => {
    flag.value = !flag.value
  }
  const beforeEnter = () => {
    console.log('进入之前') //对应enter-from
  }
  const enter = (el:Element,done:Function) => {
    console.log('进入中') //对应enter-active
    console.log('el', el)
    setTimeout(() => {
      console.log('done', done)
      done()//done这个函数就是   @after-enter  所对应的函数 即  afterEnter
    }, 2000)//在这个延迟时间内再次点击切换  就会触发显示过度打断函数
 
  }
  const afterEnter = () => {
    console.log('进入之后') //对应enter-to
  }
  const enterCancelled = () => {
    console.log('显示过度打断') //显示过度打断
  }
  const beforeLeave = () => {
    console.log('离开之前') //对应leave-from
  }
  const leave = () => {
    console.log('离开中') //对应leave-active
  }
  const afterLeave = () => {
    console.log('离开之后') //对应leave-to
  }
  const leaveCancelled = () => {
    console.log('离开过度打断') //离开过度打断
  }
</script>

<style scoped>
  /* 进入开始时刻 */
  .fade-in {
    /* 自定义类名 */
    width: 0;
    height: 0;
    transform: rotate(360deg);
  }
</style>

生命周期结合 GreenSock js动画库

<template>
  <div>
    <button @click="toggle" class="btn">切换</button>
    <Transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <!-- 自定义过渡类名 -->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
      </keep-alive>
    </Transition>
  </div>
</template>

<script setup lang="ts">
  import 'animate.css'
  import gsap from 'gsap'
  import Login from './components/Login.vue'
  import Register from './components/register.vue'
  import { ref } from 'vue'
  const flag = ref(false)
  const toggle = () => {
    flag.value = !flag.value
  }
  const beforeEnter = (el: Element) => {
    gsap.set(el, {
      width: 0,
      height: 0,
    })
  }
  const enter = (el: Element, done: gsap.Callback) => {
    gsap.to(el, {
      width: 300,
      height: 300,
      onComplete: done,
      // 用纯ts  或者  js 来操作动画  结束后 必须调用done函数来表示transition 动画结束
    })
  }
  const leave = (el: Element, done: gsap.Callback) => {  gsap.to(el, {
      width: 0,
      height: 0,
      onComplete: done,
      // 用纯ts  或者  js 来操作动画  结束后 必须调用done函数来表示transition 动画结束
    })}
</script>

<style scoped>
.btn{
  position: absolute;
  top: 200px;
  left: 10%;
}
</style>

appear

通过这个属性可以设置初始节点过度 就是页面加载完成就开始动画 对应三个状态

<template>
  <div>
    <button @click="toggle" class="btn">切换</button>
    <Transition
      appear
      appear-from-class="from"
      appear-active-class="active"
      appear-to-class="to"
    >
      <!-- appear 是页面一加载完成就展示的动画 再切换就不会展示动画了-->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
      </keep-alive>
    </Transition>
  </div>
</template>

<script setup lang="ts">
  import 'animate.css'
  import gsap from 'gsap'
  import Login from './components/Login.vue'
  import Register from './components/register.vue'
  import { ref } from 'vue'
  const flag = ref(true)
  const toggle = () => {
    flag.value = !flag.value
  }
</script>

<style scoped>
  .btn {
    position: absolute;
    top: 200px;
    left: 10%;
  }
  .from {
    width: 0;
    height: 0;
  }
  .active {
    transition: all 2s ease;
  }
  .to {
    height: 300px;
    width: 300px;
  }
</style>

同样的 只要是使用类来展示的动画都可以使用Animate.css | A cross-browser library of CSS animations.

  <Transition
      appear
      appear-active-class="animate__animated animate__fadeInLeftBig" 
    >
      <!-- appear 是页面一加载完成就展示的动画 再切换就不会展示动画了-->
      <keep-alive :include="['Login']" :exclude="['']" :max="5">
        <Login v-if="flag"></Login>
      </keep-alive>
    </Transition>