vue3-内置组件-Transition

基于状态变化的过渡和动画（常用）

建议多看几遍~~。然后动手去写写，学编程只有多动手才能有感觉。

内置组件:

它在任意别的组件中都可以被使用，无需注册。

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

<Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。

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

Transition

进入或者离开的动画

  • 由 v-if 所触发的切换

  • 由 v-show 所触发的切换

  • 由特殊元素 <component> 切换的动态组件

  • 改变特殊的 key 属性

<script lang="ts" setup>
import { ref } from 'vue'const show = ref(true)
</script><template><div class="container"><button @click="show = !show">点击切换按钮状态</button><Transition><p v-if="show">hello</p></Transition></div>
</template><style lang="scss" scoped>
.container {/* 下面我们会解释这些 class 是做什么的 */.v-enter-active,.v-leave-active {transition: opacity 0.5s ease;}.v-enter-from,.v-leave-to {opacity: 0;}
}
</style>

<Transition> 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。

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

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

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

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

基于 CSS 的过渡效果

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 被移除的同时)，在过渡或动画完成之后移除。

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

  1. Transition 一般都会搭配原生 CSS 过渡一起使用，正如你在上面的例子中所看到的那样。

  2. 这个 transition CSS 属性是一个简写形式，使我们可以一次定义一个过渡的各个方面，包括需要执行动画的属性、持续时间和速度曲线。

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

<script lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
</script><template><div class="container"><button @click="show = !show">点击切换按钮状态</button><Transition name="slide-fade"><p v-if="show">持续时间和速度曲线控制</p></Transition></div>
</template><style lang="scss" scoped>
.container {/*进入和离开动画可以使用不同持续时间和速度曲线。
*/.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 lang="ts" setup>
import { ref } from 'vue'
const show = ref(true)
</script><template><div class="container"><button @click="show = !show">点击切换状态</button><Transition name="bounce"><p v-if="show" style="text-align: center">这是 CSS transition 示例</p></Transition></div>
</template><style lang="scss" scoped>
.container {text-align: center;.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：

安装 animate.css 动画库，(已安装的可以忽略)

pnpm install animate.css --save

<!-- 假设你已经在页面中引入了 Animate.css -->
<script lang="ts" setup>
import { ref } from 'vue'
import 'animate.css'
const show = ref(true)
</script><template><div class="container"><button @click="show = !show">点击切换状态</button><Transitionname="custom-classes"enter-active-class="animate__animated animate__zoomIn "leave-active-class="animate__animated animate__zoomOut"><p v-if="show">引入animate动画库</p></Transition></div>
</template><style lang="scss" scoped>
.container {text-align: center;
}
</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="550">...</Transition>

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

<Transition :duration="550">...</Transition>
性能考量

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

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

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

相比之下，_像 height 或者 margin 这样的属性会触发 CSS 布局变动_，因此执行它们的动画效果更昂贵，需要谨慎使用。我们可以在 CSS-Triggers（https://csstriggers.com/） 这类的网站查询哪些属性会在执行动画时触发 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 就是必须的。否则，钩子将被同步调用，过渡将立即完成。

这里是使用 GreenSock 库(https://gsap.com/)执行动画的一个示例，你也可以使用任何你想要的库，比如 Anime.js (https://animejs.com/) 或者 Motion One(https://motion.dev/)。

可复用过渡效果

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

<!-- MyTransition.vue -->
<script>
// JavaScript 钩子逻辑...
</script><template><!-- 包装内置的 Transition 组件 --><Transitionname="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 在几个组件间进行切换，只要确保任一时刻只会有一个元素被渲染即可：

<Transition><button v-if="docState === 'saved'">Edit</button><button v-else-if="docState === 'edited'">Save</button><button v-else-if="docState === 'editing'">Cancel</button>
</Transition>
``

过渡模式

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

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

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

将之前的例子改为 mode="out-in" 后是这样：

<Transition> 也支持 mode="in-out"，虽然这并不常用。

组件间过渡

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

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

动态过渡

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

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

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

你也可以根据你的组件的当前状态在 JavaScript 过渡钩子中应用不同的行为。最后，创建动态过渡的终极方式还是创建可复用的过渡组件，并让这些组件根据动态的 props 来改变过渡的效果。掌握了这些技巧后，就真的只有你想不到，没有做不到的了。

欢迎关注，后面会有一些资源可以免费获取哟~

分享前后端编程经验，技术干货，技术方案，好用的开发工具和应用软件，人生经验感悟等

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/670796.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

EMC测试介绍

EMC测试介绍

EMC测试介绍 EMC包括电磁干扰(EMI) 和抗电磁干扰(EMS)两个部分。发射干扰传导发射测试极限线以峰值检坡器测量时使用的决策树应用EN55022标准的波形示例测试仪器![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/4580f693ae9a4f84891ece29681c7bf2.png) 辐射发射测试…
阅读更多...
react 之 react.memo

react 之 react.memo

React.memo 作用&#xff1a;允许组件在props没有改变的情况下跳过重新渲染 组件默认的渲染机制 默认机制&#xff1a;顶层组件发生重新渲染&#xff0c;这个组件树的子级组件都会被重新渲染 // memo // 作用&#xff1a;允许组件在props没有改变的情况下跳过重新渲染import…
阅读更多...
npm淘宝镜像源换新地址

npm淘宝镜像源换新地址

新的淘宝npm镜像源地址&#xff1a;https://registry.npmmirror.com 切换新的镜像源 npm config set registry https://registry.npmmirror.com然后再执行以下操作查看是否成功 npm config list如果没安装过淘宝镜像源的&#xff0c;则直接安装 npm install -g cnpm --regi…
阅读更多...
JVM 性能调优 - 参数调优(3)

JVM 性能调优 - 参数调优(3)

查看 JVM 内存的占用情况 编写代码 package com.test;public class PrintMemoryDemo {public static void main(String[] args) {// 堆内存总量long totalMemory Runtime.getRuntime().totalMemory();// jvm 试图使用的最大堆内存long maxMemory Runtime.getRuntime().maxM…
阅读更多...
【Linux】Linux权限（下）

【Linux】Linux权限（下）

Hello everybody!在上一篇文章中&#xff0c;权限讲了大部分内容。今天继续介绍权限剩下的内容&#xff0c;希望大家看过这篇文章后都能有所收获&#xff01; 1.更改文件的拥有者和所属组 对于普通用户&#xff0c;文件的拥有者和所属组都无权修改。 、 、 但root可以修改文件…
阅读更多...
多账号运营为什么要使用动态住宅代理IP？

多账号运营为什么要使用动态住宅代理IP？

对于跨境有多账号运营需求的企业来说&#xff0c;选择正确类型的代理IP对于平稳运行至关重要。但最适合这项工作的代理类型是什么&#xff1f;为了更好地管理不同平台上的多个账户并优化成本&#xff0c;您可以选择动态住宅代理。 一、什么是动态住宅代理 动态住宅代理IP是互联…
阅读更多...
创新方案｜经济下行周期下企业避免杀价内卷侵蚀利润亟需5种创新定价策略

创新方案｜经济下行周期下企业避免杀价内卷侵蚀利润亟需5种创新定价策略

随着通胀持续、全球经济衰退逆风让消费者谨慎支出&#xff0c;绝大多数企业都担心如何刺激购买且保持利润率。在本研究认为&#xff0c;公司不应该简单地调整价格&#xff0c;而应该创造性地借鉴其他行业定价打法&#xff0c;通过创新定价选项的组合&#xff0c;增加向客户计价…
阅读更多...
LLM之RAG实战（二十二）| LlamaIndex高级检索（一）构建完整基本RAG框架（包括RAG评估）

LLM之RAG实战（二十二）| LlamaIndex高级检索（一）构建完整基本RAG框架（包括RAG评估）

在RAG&#xff08;retrieval Augmented Generation&#xff0c;检索增强生成&#xff09;系统中&#xff0c;检索到文本的质量对大型语言模型生成响应的质量是非常重要的。检索到的与回答用户查询相关的文本质量越高&#xff0c;你的答案就越有根据和相关性&#xff0c;也更容易…
阅读更多...
QMUI_Android：提升Android开发效率与质量的利器

QMUI_Android：提升Android开发效率与质量的利器

QMUI_Android&#xff1a;提升Android开发效率与质量的利器 在Android应用开发过程中&#xff0c;开发者常常面临着重复编写基础组件和处理兼容性问题的挑战&#xff0c;这不仅耗费时间&#xff0c;也降低了开发效率。为了解决这一问题&#xff0c;Tencent推出了QMUI_Android框…
阅读更多...
LeetCode、17. 电话号码的字母组合【中等，dfs回溯】

LeetCode、17. 电话号码的字母组合【中等，dfs回溯】

文章目录 前言LeetCode、17. 电话号码的字母组合【中等&#xff0c;dfs回溯】题目与类型思路递归回溯优化&#xff1a;StringBuilder来回溯补充代码&#xff1a;2024.1.31&#xff08;简化&#xff09; 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博…
阅读更多...
docker部署docker运维工具

docker部署docker运维工具

简介 主要功能:管理容器,管理镜像,管理容器网络 安装 拉取镜像 docker pull joinsunsoft/docker.ui:1.0.1 启动容器 docker run -d --name docker.ui --restart always -v /var/run/docker.sock:/var/run/docker.sock -p 10039:8999 joinsunsoft/docker.ui:1.0.1 使用 打…
阅读更多...
基于鲸鱼优化的knn分类特征选择算法matlab仿真

基于鲸鱼优化的knn分类特征选择算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 鲸鱼优化算法&#xff08;WOA&#xff09; 4.1.1 包围猎物 4.1.2 螺旋式搜索 4.1.3 更新策略 4.2 K近邻&#xff08;KNN&#xff09;分类器 4.3 基于WOA的KNN分类特征选择算法 5.完…
阅读更多...
将Juniper虚拟防火墙vSRX导入EVE-NG

将Juniper虚拟防火墙vSRX导入EVE-NG

正文共&#xff1a;555 字 8 图&#xff0c;预估阅读时间&#xff1a;1 分钟 前面我们已经简单介绍了如何导入vSRX的VMware镜像到Workstation&#xff08;Juniper虚拟防火墙vSRX部署初体验&#xff09;&#xff0c;如何导入ESXi并简单操作WEB配置&#xff08;将Juniper虚拟防火…
阅读更多...
【计算机网络基础篇】学习笔记系列之一《TCP/IP 网络模型》

【计算机网络基础篇】学习笔记系列之一《TCP/IP 网络模型》

文章目录 1、问题提出2&#xff0c;网络协议是分层的3&#xff0c;应用层4&#xff0c;传输层5&#xff0c;网络层6&#xff0c;网络接口层7&#xff0c;总结 1、问题提出 为什么要有 TCP/IP 网络模型&#xff1f; 不同设备上的进程间通信需要通过一套通用的网络协议进行网络通…
阅读更多...
第二证券：北向资金连续第五日净流入，茅台、工行、五粮液等获加仓

第二证券：北向资金连续第五日净流入，茅台、工行、五粮液等获加仓

沪指低收险守2700点关口&#xff0c;北向资金接连5日净流入。 2月5日&#xff0c;A股三大股指团体低开&#xff0c;三大股指均创阶段性新低后反弹&#xff0c;创业板指午后首先翻红且一度涨超3%&#xff0c;深成指和沪指也相继转涨。但商场做多情绪欠安&#xff0c;沪深股指重…
阅读更多...
opensatck中windows虚拟机CPU核数显示异常问题处理

opensatck中windows虚拟机CPU核数显示异常问题处理

文章目录 一、问题描述二、元数据信息三、以32核的实例模版为例3.1 单槽位32核3.2 双槽位32核 总结 一、问题描述 openstack创建windows虚拟机的时候&#xff0c;使用普通的实例模版会出现CPU数量和实例模版不一致的问题。需要定制元数据才可以正常显示。 帖子&#xff1a;htt…
阅读更多...
米贸搜|关于Facebook广告受限：在这些情况下，Meta会限制广告主的广告能力！

米贸搜|关于Facebook广告受限：在这些情况下，Meta会限制广告主的广告能力！

如果你被限制了投放广告&#xff0c;那么你会在Facebook上收到通知。 除了审查广告之外&#xff0c;Meta还监控和调查广告主在Meta技术上的行为&#xff0c;在某些情况下&#xff0c;Meta可能会对广告主施加限制&#xff0c;限制广告主的广告能力&#xff0c;这些限制旨在帮助保…
阅读更多...
ChatGPT高效提问—prompt基础

ChatGPT高效提问—prompt基础

ChatGPT高效提问—prompt基础 ​ 设计一个好的prompt对于获取理想的生成结果至关重要。通过选择合适的关键词、提供明确的上下文、设置特定的约束条件&#xff0c;可以引导模型生成符合预期的回复。例如&#xff0c;在对话中&#xff0c;可以使用明确的问题或陈述引导模型生成…
阅读更多...
macbookpro和macbookair的区别？cleanmymac 怎么清理mac空间

macbookpro和macbookair的区别？cleanmymac 怎么清理mac空间

苹果mac air和pro区别有&#xff1a;1、air采用了轻薄的设计&#xff0c;重量相对较轻&#xff0c;便于携带&#xff0c;而pro更加注重性能&#xff0c;所以比较重&#xff1b;2、air通常搭载较低功耗的处理器内存和存储容量相对较小&#xff0c;而pro配备了更强大的处理器、更…
阅读更多...
基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)

基于Vue2用keydown、keyup事件实现长按键盘任意键(或组合键)3秒触发自定义事件(以F1键为例)

核心代码 <template></template> <script> export default {created() {//监听长按快捷键addEventListener("keydown", this.keydown);addEventListener("keyup", this.keyup);},destroyed(d) {//移除长按快捷键removeEventListener(&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023