vue3 Transition内置组件的使用。

已于 2024-02-27 13:42:43 修改
阅读量816 收藏 28
点赞数 15
分类专栏： vue3学习笔记 文章标签： 前端
于 2024-02-27 13:42:12 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43995143/article/details/136319783
版权

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

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

以下是最基本用法的示例：

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
  <button @click="show = !show">Toggle</button>
  <Transition>
    <p v-if="show">hello</p>
  </Transition>
</template>

<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

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

当一个 <Transition> 组件中的元素被插入或移除时，会发生下面这些事情：

  1. Vue 会自动检测目标元素是否应用了 CSS 过渡或动画。如果是，则一些 CSS 过渡 class 会在适当的时机被添加和移除。

  2. 如果有作为监听器的 JavaScript 钩子，这些钩子函数会在适当时机被调用。

  3. 如果没有探测到 CSS 过渡或动画、也没有提供 JavaScript 钩子，那么 DOM 的插入、删除操作将在浏览器的下一个动画帧后执行。

基于 CSS 的过渡效果

CSS 过渡 class​

一共有 6 个应用于进入与离开过渡效果的 CSS class。

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

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

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

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

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

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

v-enter-active 和 v-leave-active 给我们提供了为进入和离开动画指定不同速度曲线的能力。

为过渡效果命名

我们可以给 <Transition> 组件传一个 name prop 来声明一个过渡效果名：

<Transition name="fade">
  ...
</Transition>

对于一个有名字的过渡效果，对它起作用的过渡 class 会以其名字而不是 v 作为前缀。比如，上方例子中被应用的 class 将会是 fade-enter-active 而不是 v-enter-active。这个“fade”过渡的 class 应该是这样：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

CSS 的 transition

<Transition> 一般都会搭配原生 CSS 过渡一起使用，正如你在上面的例子中所看到的那样。这个 transition CSS 属性是一个简写形式，使我们可以一次定义一个过渡的各个方面，包括需要执行动画的属性、持续时间和速度曲线。

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
	<button @click="show = !show">Toggle Slide + Fade</button>
  <Transition name="slide-fade">
    <p v-if="show">hello</p>
  </Transition>
</template>

<style>
.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 动画和 CSS transition 的应用方式基本上是相同的，只有一点不同，那就是 *-enter-from 不是在元素插入后立即移除，而是在一个 animationend 事件触发时被移除。

对于大多数的 CSS 动画，我们可以简单地在 *-enter-active 和 *-leave-active class 下声明它们。下面是一个示例：

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
	<button @click="show = !show">Toggle</button>
  <Transition name="bounce">
    <p v-if="show" style="margin-top: 20px; text-align: center;">
      Hello here is some bouncy text!
    </p>
  </Transition>
</template>

<style>
.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

你也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

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

你传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如 Animate.css：

<script setup>
import { ref } from 'vue'

const show = ref(true)
</script>

<template>
	<button @click="show = !show">Toggle</button>
  <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>
</template>

<style>
@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css";
</style>

同时使用 transition 和 animation

Vue 需要附加事件监听器，以便知道过渡何时结束。可以是 transitionend 或 animationend，这取决于你所应用的 CSS 规则。如果你仅仅使用二者的其中之一，Vue 可以自动探测到正确的类型。

然而在某些场景中，你或许想要在同一个元素上同时使用它们两个。举例来说，Vue 触发了一个 CSS 动画，同时鼠标悬停触发另一个 CSS 过渡。此时你需要显式地传入 type prop 来声明，告诉 Vue 需要关心哪种类型，传入的值是 animation 或 transition：

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

深层级过渡与显式过渡时长

尽管过渡 class 仅能应用在 <Transition> 的直接子元素上，我们还是可以使用深层级的 CSS 选择器，在深层级的元素上触发过渡效果。

<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>
/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

/* ... 省略了其他必要的 CSS */

我们甚至可以在深层元素上添加一个过渡延迟，从而创建一个带渐进延迟的动画序列：

/* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

然而，这会带来一个小问题。默认情况下，<Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中，期望的行为应该是等待所有内部元素的过渡完成。

在这种情况下，你可以通过向 <Transition> 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间：

如果有必要的话，你也可以用对象的形式传入，分开指定进入和离开所需的时间：

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

性能考量

你可能注意到我们上面例子中展示的动画所用到的 CSS 属性大多是 transform 和 opacity 之类的。用这些属性制作动画非常高效，因为：

  1. 他们在动画过程中不会影响到 DOM 结构，因此不会每一帧都触发昂贵的 CSS 布局重新计算。

  2. 大多数的现代浏览器都可以在执行 transform 动画时利用 GPU 进行硬件加速。

相比之下，像 height 或者 margin 这样的属性会触发 CSS 布局变动，因此执行它们的动画效果更昂贵，需要谨慎使用。我们可以在 CSS-Triggers 这类的网站查询哪些属性会在执行动画时触发 CSS 布局变动。

JavaScript 钩子

你可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数：

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 当进入过渡完成时调用。
function onAfterEnter(el) {}

// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}

这些钩子可以与 CSS 过渡或动画结合使用，也可以单独使用。

在使用仅由 JavaScript 执行的动画时，最好是添加一个 :css="false" prop。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外，还可以防止 CSS 规则意外地干扰过渡效果。

<Transition
  ...
  :css="false"
>
  ...
</Transition>

在有了 :css="false" 后，我们就自己全权负责控制什么时候过渡结束了。这种情况下对于 @enter 和 @leave 钩子来说，回调函数 done 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

例子：

<script setup>
import { ref } from 'vue'
import gsap from 'gsap'

const show = ref(true)

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
  })
}
</script>

<template>
  <button @click="show = !show">Toggle</button>

  <Transition
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @leave="onLeave"
    :css="false"
  >
    <div class="gsap-box" v-if="show"></div>
  </Transition>
</template>

<style>
.gsap-box {
  background: #42b883;
  margin-top: 20px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
</style>

可复用过渡效果

益于 Vue 的组件系统，过渡效果是可以被封装复用的。要创建一个可被复用的过渡，我们需要为 <Transition> 组件创建一个包装组件，并向内传入插槽内容：

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>

<template>
  <!-- 包装内置的 Transition 组件 -->
  <Transition
    name="my-transition"
    @enter="onEnter"
    @leave="onLeave">
    <slot></slot> <!-- 向内传递插槽内容 -->
  </Transition>
</template>

<style>
/*
  必要的 CSS...
  注意：避免在这里使用 <style scoped>
  因为那不会应用到插槽内容上
*/
</style>

现在 MyTransition 可以在导入后像内置组件那样使用了：

<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

出现时过渡

如果你想在某个节点初次渲染时应用一个过渡效果，你可以添加 appear prop：

<Transition appear>
  ...
</Transition>

元素间过渡

除了通过 v-if / v-show 切换一个元素，我们也可以通过 v-if / v-else / v-else-if 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可：

<script setup>
import { ref } from 'vue'

const docState = ref('saved')
</script>

<template>
	<span style="margin-right: 20px">Click to cycle through states:</span>
  <div class="btn-container">
		<Transition name="slide-up">
      <button v-if="docState === 'saved'"
              @click="docState = 'edited'">Edit</button>
      <button v-else-if="docState === 'edited'"
              @click="docState = 'editing'">Save</button>
      <button v-else-if="docState === 'editing'"
              @click="docState = 'saved'">Cancel</button>
    </Transition>
  </div>
</template>

<style>
.btn-container {
  display: inline-block;
  position: relative;
  height: 1em;
}

button {
  position: absolute;
}

.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.25s ease-out;
}

.slide-up-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>

过渡模式

在之前的例子中，进入和离开的元素都是在同时开始动画的，因此我们不得不将它们设为 position: absolute 以避免二者同时存在时出现的布局问题。

然而，很多情况下这可能并不符合需求。我们可能想要先执行离开动画，然后在其完成之后再执行元素的进入动画。手动编排这样的动画是非常复杂的，好在我们可以通过向 <Transition> 传入一个 mode prop 来实现这个行为：

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

组件间过渡

<Transition> 也可以作用于动态组件之间的切换：

<script setup>
import { shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'

// use shallowRef to avoid component being deeply observed
const activeComponent = shallowRef(CompA)
</script>

<template>
	<label>
    <input type="radio" v-model="activeComponent" :value="CompA"> A
  </label>
  <label>
    <input type="radio" v-model="activeComponent" :value="CompB"> B
  </label>
  <Transition name="fade" mode="out-in">
    <component :is="activeComponent"></component>
  </Transition>
</template>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

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

动态过渡

<Transition> 的 props (比如 name) 也可以是动态的！这让我们可以根据状态变化动态地应用不同类型的过渡：

<Transition :name="transitionName">
  <!-- ... -->
</Transition>

这个特性的用处是可以提前定义好多组 CSS 过渡或动画的 class，然后在它们之间动态切换。

gxw_viva
关注
专栏目录
Vue笔记_03组件_transition组件(Vue内置组件)
qq_43260366的博客
11-30 1720
6个类[1]表示元素进入过程中所执行的样式(动画)；[2]表示元素离开过程中所执行的样式(动画)；[3]xxx-enter表示元素进入之前的样式[4]表示元素进入之后的样式[5]xxx-leave表示元素离开之前的样式[6]表示元素离开之后的样式若是配合帧动画使用-> 仅需[1]、[2]即可；若是配置过渡动画使用 -> 需要6个类搭配使用；本质：vue就是在监听组件的插入、更新、销毁，然后给其加上对应的类名。
过渡动画-Vue内置Transition组件的使用
m0_69099757的博客
09-01 492
过渡动画-Vue内置Transition组件的使用
vue3 transition
qq_39002369的博客
03-20 544
Defination Component transition transition-group Defination(for all) Describing how * an element * transfer from invisible to present. Distinction Component transition only with a displaying element inside .Means that you can use v-if/v-show Component t
解决 Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
专注于深入研究多种编程语言，以实战为导向，逐步拓展开发技能，提升工程化编码和思维能力，展现无敌技术实力。
12-08 1926
在使用 Vue 3 中的 组件时，尝试传递非 props 属性（如 mode）可能导致组件报错。本文将探讨出现这个问题的原因，并提供了多种解决方案，包括移除不必要的属性、全局配置、使用 组件等。同时介绍了 Vue 3 过渡系统的改变以及避免类似问题的建议，旨在帮助开发者更好地使用 Vue 3 的过渡功能。
vue3【详解】内置组件 Transition
最新发布
朝阳39的博客
07-22 1021
添加属性 name，可自定义过渡动画名称，代替默认的 v</此时需自行添加以下 cssopacity: 0;添加属性，可自定义过渡动画类名（方便使用第三方的动画库，如。
详解Vue3中的内置组件（transition）
一起学习
12-24 4449
本文主要介绍Vue3中的内置组件（transition）的普通写法和setup写法。
vue3内置组件Transition简单介绍和应用
qq_2511276124的博客
01-11 4924
Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用无需注册。**它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。由 v-if 所触发的切换由 v-show 所触发的切换由特殊元素 切换的动态组件注意： 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。你传入的这些 class 会覆盖相应阶段的默认 class 名。
vue3学习笔记之Transition&TransitionGroup
小多的博客
01-10 1847
height : 0;} .to {传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库时非常有用，比如
vue内置组件transition简单原理图文详解(小结)
10-18
在介绍Vue.js框架中的内置组件Transition之前，需要了解Vue.js本身是前端开发中一个非常流行的渐进式JavaScript框架。Vue的目的是通过尽可能简单的API提供响应式数据绑定和组合的视图组件。Vue的核心库只关注视图层...
Vue3动画之内置组件transition的使用
u010519866的博客
07-05 6134
Vue3提供了transition的内置组件，可以给任何元素或组件添加进入/离开的过渡，最常见的有下面三种：①条件渲染（使用v-if或v-show） ②动态组件 ③组件根节点使用方法：只要在transition组件中定义好name属性，就可以根据相应的class给包裹的元素或组件添加各种动画样式比如transition组件的name是fadevue内部已经给我们自动定义好的类，通过这些类，就可以在css中定义元素进入、离开和过渡状态的样式了。下面只要把这些类名的第一个横杠之前的英文改成fade.fade-e
Vue中的transition封装组件的实现方法
10-16
Vue的一个重要特性是，它提供了内置的<transition>组件，用于在元素的显示和隐藏之间添加过渡动画效果。 在Vue中使用<transition>组件可以非常方便地为组件的进入和离开添加动画。这个组件允许开发者指定通过CSS类...
Vue3 学习笔记 —— transition、transition-group
Lyrelion的博客
10-24 4021
Vue3 学习笔记 —— transition、transition-group
【Vue3】transition 组件
小秀的博客
08-28 353
height : 0;width : 0;} .e-to {/* 花里胡哨的旋转 */ transform : rotate(360deg);width : 0;height : 0;height : 0;width : 0;} .e-to {/* 花里胡哨的旋转 */ transform : rotate(360deg);width : 0;height : 0;height : 0;width : 0;
VUE3内置组件Transition的学习使用
宁波阿成的博客
03-13 1445
VUE3内置组件Transition的学习使用
vue3.0(十三)内置组件Transition和TransitionGroup
chengcheng9876的博客
06-14 1165
vue3.0(十三)内置组件Transition和TransitionGroup
vue3学习记录之内置组件Transition基于状态变化的过渡和动画
失眠时间的博客
11-17 685
本文参考vue3Vue 提供了两个内置组件，可以帮助我们制作基于状态变化的过渡和动画会在一个元素或组件进入和离开 DOM 时应用动画。会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。
vue3(八)-基础入门之 Transition 单元素过渡 与 TransitionGroup 列表过渡
weixin_43520586的博客
12-28 1160
进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
vue中transition标签如何使用
热门推荐
weixin_46995731的博客
10-10 2万+
vue中transition标签如何使用 概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库，如 Velocity.js transition标签使用 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进
.vue有哪些内置组件？
05-12
Vue.js 提供了很多的内置组件，以下是一些常用的内置组件： 1. `<transition>`：用于在元素插入或移除 DOM 中时，添加过渡效果。 2. `<transition-group>`：与 `<transition>` 类似，但适用于同时运行多个元素的过渡效果。 3. `<keep-alive>`：用于缓存组件，以便在切换组件时保留状态或避免重新渲染。 4. `<component>`：用于动态地渲染组件。 5. `<slot>`：用于在组件中插入内容。 6. `<v-model>`：用于实现双向数据绑定。 7. `<v-bind>`：用于动态地绑定属性。 8. `<v-for>`：用于循环渲染列表。 9. `<v-if>`：用于根据条件渲染组件。 10. `<v-show>`：用于根据条件显示或隐藏组件。 这些内置组件都可以帮助我们更方便地在 Vue.js 应用中实现各种功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值