vue3学习记录之内置组件Transition基于状态变化的过渡和动画

前言

本文参考vue3

Vue 提供了两个内置组件，可以帮助我们制作基于状态变化的过渡和动画

• <Transition > 会在一个元素或组件进入和离开 DOM 时应用动画。

• <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

说明

<Transition> 是一个内置组件，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素 切换的动态组件
• 改变特殊的 key 属性

需要配置css样式设置transition相关属性才有对应动画效果，具体有以下六个

• v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。

• v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。

• v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

• v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。

• v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。

• v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

<Transition>组件只需要一个子元素或组件。
如果有多个需要使用此组件需为过渡效果命名，可以新增name属性，例如<Transition name="sidebarLogoFade">,这个时候上述的v-leave-to需要写成sidebarLogoFade-leave-to才能生效

使用

opacity、设置透明度效果

<template>
  <button @click="show.opacity = !show.opacity">Opacity</button>
  <Transition name="sidebarLogoFade">
    <div v-if="show.opacity">hello</div>
  </Transition>
</template>

<script setup>
import { reactive, ref } from 'vue'
const show = reactive({
  opacity: true,
})

</script>

<style scoped>
div {
  width: 200px;
  height: 50px;
  background-color: aqua;
}

.sidebarLogoFade-enter-active,
.sidebarLogoFade-leave-active {
  transition: opacity 5s ease;
}

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

折叠效果 设置width实现

<template>
  <button @click="change">Collapse</button>
  <Transition name="collapse">
    <div :key="show.key" class="bg" :class="{'collapse': show.collapse, 'expand': !show.collapse}">{{ show.collapse ? '展开' : '折叠' }}</div>
  </Transition>
  
  <!-- <Transition name="expand">
    <div v-if="!show.collapse" class="bg" :class="{'expand': !show.collapse}">折叠</div>
  </Transition> -->
</template>

<script setup>
import { reactive, ref } from 'vue'
const show = reactive({
  collapse: true,
  key: 120
})
const change = () => {
  show.key++
  show.collapse = !show.collapse
  console.log('change', show)
}
</script>

<style scoped>
.bg {
  background-color: aqua;
}
.collapse, .expand {
  height: 50px;
}
.collapse {
  width: 200px;
}
.expand {
  width: 20px;
}
/* 进入动画的起始状态\离开动画的结束状态 */
.collapse-enter-from, .collapse-leave-to{
  width: 20px;
}
/* 进入、离开动画的生效状态 */
.collapse-enter-active, .collapse-leave-active{
  transition: all 5s ease;
}
/* 进入动画的结束状态\离开动画的起始状态 */
.collapse-enter-to, .collapse-leave-from{
  width: 200px;
}
</style>

CSS 的 transition

例如：它使用了不同的持续时间和速度曲线来过渡多个属性

<template>
  <button @click="show = !show">隐藏</button>
  <Transition name="slide-fade">
    <p v-if="show">hello</p>
  </Transition>
</template>

<script setup>
import { ref } from "vue";
const show = ref(true);
</script>

<style scoped>
/*
  进入和离开动画可以使用不同
  持续时间和速度曲线。
*/
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}
</style>

CSS 的 animation

与 CSS transition 的应用方式基本上是相同的，只有一点不同，那就是 *-enter-from 不是在元素插入后立即移除，而是在一个 animationend 事件触发时被移除。

<template>
  <button @click="show = !show">隐藏</button>
  <Transition name="bounce">
    <p v-if="show" style="text-align: center">
      Hello here is some bouncy text!
    </p>
  </Transition>
</template>

<script setup>
import { ref } from "vue";
const show = ref(true);
</script>

<style scoped>
.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

自定义过渡 class

可以向 传递以下的 props 来指定自定义的过渡 class：

• enter-from-class
• enter-active-class
• enter-to-class
• leave-from-class
• leave-active-class
• leave-to-class

其他的第三方 CSS 动画库时非常有用，比如 Animate.css：

<!-- 假设你已经在页面中引入了 Animate.css -->
<Transition
  name="custom-classes"
  enter-active-class="animate__animated animate__tada"
  leave-active-class="animate__animated animate__bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

同时使用 transition 和 animation

传入 type prop 来声明，告诉 Vue 需要关心哪种类型，传入的值是 animation 或 transition：

<Transition type="animation">...</Transition>

更多效果可直接在vue官网阅读