vue内置组件Transition的详解

1. Transition定义

Vue 提供了两个内置组件,可以帮助你制作基于状态变化的过渡和动画:
<Transition>会在一个元素或组件进入和离开 DOM 时应用动画。
<TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入,移动,或移除时应用动画。

简单地说,就是当元素发生变化,比如消失、显示时,添加动画让它更自然过渡。它是vue内置组件,不需要引入注册就可以直接使用。

在什么情况会出现过渡?

1.v-if切换

2. v-show切换

  1. 动态组件component切换

  2. 改变特殊的key属性

前几个比较好理解,最后一个用到了key值变化导致元素强制更新。下面例子的key值变化,vue会认为这里产生了一个新元素,之前的会被删除,从而导致过渡。

html 复制代码
<script setup>
import { ref } from 'vue'
  
const keyValue = ref(1)
</script>

<template>
  <button @click="() =>keyValue = Math.random()">Toggle</button>
  <Transition >
    <p :key="keyValue">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>

2. 添加过渡效果

如果不给命名的话,添加动画效果的默认类名前缀是v-

v-enter-active :进入动画的生效状态
v-leave-active:离开动画的生效状态
v-enter-from :刚进入 动画的开始 状态
v-leave-to离开 动画时的结束 状态
v-enter-to :刚进入动画的结束状态
v-leave-from :离开动画的结开始态

一般前4种用得比较多,两个生效状态,加上进入动画的开始状态和离开动画时的结束状态。

3. 自定义过渡类名

通过name可以自定义<Transition>的过渡类名。

html 复制代码
<Transition name="a">
  ...
</Transition>
css 复制代码
.a-enter-active,
.a-leave-active {
  transition: opacity 0.5s ease;
}

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

注意: 里面只能有一个根组件,但使用v-if、v-else、v-else-if切换显示是可以的。

如果想对列表中的元素设置过渡,可以使用<TransitionGroup >

4. 深层元素的过渡

可以给深层级的元素设置过渡效果。

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

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

duration属性设置过渡持续的时间,单位是毫秒。

html 复制代码
<Transition :duration="550">...</Transition>

5. 过渡的钩子函数

html 复制代码
<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
...
<<Transition>

6. 封装过渡效果

html 复制代码
<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script>

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

<style>
</style>

注意 :该组件样式不要添加scoped , 不然插槽内没有过渡效果。

html 复制代码
<MyTransition>
  <div v-if="show">Hello</div>
</MyTransition>

7. 过渡模式

可以设置属性modeout-inin-out
in-out表示当前元素先进行过渡,完成之后新元素过渡进入。
通常我们更多的会使用out-in,让当前元素先离开,然后再进行新元素的进入 。

相关推荐
群联云防护小杜8 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2421 分钟前
html复习
javascript·microsoft·html
汉得数字平台26 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹33 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows