Vue 宝典之动画(transition)

文章目录

    • 🥑Vue 过渡效果的基础概念
      • 🫒`<transition>` 组件的基本用法
      • 🫒 过渡类名
      • 🫒CSS 过渡
    • 🥑Vue.js 中的高级动画特性
      • 🫒多个元素的过渡
      • 🫒使用 JavaScript 钩子函数控制动画
        • 🍆 `beforeEnter`, `enter`, `afterEnter`, `enterCancelled`
        • 🍆`beforeLeave`, `leave`, `afterLeave`, `leaveCancelled`
    • 🥑结语

动画在前端开发中是一种强大的交互设计工具,它可以使用户界面更生动、更具吸引力。在 Vue.js 中,动画可以通过过渡效果和动画系统来实现。下面详细介绍 Vue.js 中动画的相关概念、使用方法和一些高级特性。

🥑Vue 过渡效果的基础概念

🫒<transition> 组件的基本用法

在 Vue.js 中,过渡效果主要通过 <transition> 组件来实现。这个组件可以包裹任意元素或组件,并在元素进入或离开 DOM 时应用过渡效果。下面是一个简单的例子:

<template><div><transition name="fade"><p v-if="show">Hello, Vue!</p></transition><button @click="toggleShow">Toggle Show</button></div>
</template><script>
export default {data() {return {show: true,};},methods: {toggleShow() {this.show = !this.show;},},
};
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

在这个例子中,<transition> 包裹了一个 <p> 元素,该元素根据条件 show 的值在进入或离开 DOM 时应用过渡效果。通过 CSS 规则,定义了元素透明度的变化,从而实现了淡入淡出的效果。

🫒 过渡类名

在过渡过程中,Vue 会为元素添加不同的类名,以触发 CSS 过渡效果。这些类名包括:

  • v-enter: 进入过渡的开始状态。
  • v-enter-active: 进入过渡的结束状态,过渡过程中的状态。
  • v-enter-to: 2.1.8+ 版本新增,与 v-enter-active 类名一样,用于过渡结束后的状态。
  • v-leave: 离开过渡的开始状态。
  • v-leave-active: 离开过渡的结束状态,过渡过程中的状态。
  • v-leave-to: 2.1.8+ 版本新增,与 v-leave-active 类名一样,用于过渡结束后的状态。

通过这些类名,我们可以在 CSS 中定义不同过渡阶段的样式,从而控制元素的过渡效果。

🫒CSS 过渡

通过定义过渡类名,我们可以在 CSS 中具体规定过渡效果的样式。下面是一个简单的例子:

.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {opacity: 0;
}.fade-enter-active, .fade-leave-active /* .fade-leave-active in <2.1.8 */ {transition: opacity 1s;
}

在这个例子中,我们定义了透明度的过渡效果,使得元素在进入或离开时都有一个渐变的效果。

🥑Vue.js 中的高级动画特性

🫒多个元素的过渡

当有多个元素需要过渡时,可以使用 <transition-group> 组件。它能够为列表中的每个元素应用过渡效果,并能够控制元素的排序和动画。

<transition-group name="list" tag="ul"><li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group><script>
export default {data() {return {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },// ...],};},
};
</script><style>
.list-enter-active, .list-leave-active {transition: opacity 1s;
}
.list-enter, .list-leave-to {opacity: 0;
}
</style>

在这个例子中,<transition-group> 包裹了一个 <ul> 元素和动态生成的列表。每次列表项变化时,都会触发过渡效果。

🫒使用 JavaScript 钩子函数控制动画

除了在模板中使用动画钩子函数外,还可以在 JavaScript 中直接使用 this.$refs 来访问 <transition> 组件的实例,从而控制动画。

<transition name="fade" ref="myTransition"><p v-if="show">Hello, Vue!</p>
</transition><script>
export default {methods: {playCustomAnimation() {const transition = this.$refs.myTransition;transition.beforeEnter(el => {// 在元素进入之前执行的操作});transition.enter(el => {// 在元素进入时执行的操作});transition.afterEnter(el => {// 在元素进入之后执行的操作});transition.enterCancelled(el => {// 如果进入过渡被取消});// 触发过渡效果transition.enter(el => {// 执行一些其他逻辑});},},
};
</script>

通过这种方式,可以更加动态地控制动画的执行流程,根据实际需求来定制动画的行为。

🍆 beforeEnter, enter, afterEnter, enterCancelled

这组钩子函数允许你在元素进入时执行特定的操作,比如改变元素的样式、添加事件监听器等。

<template><transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled"><p v-if="show">Hello, Vue!</p></transition>
</template><script>
export default {methods: {beforeEnter(el) {// 在元素进入之前执行的操作},enter(el, done) {// 在元素进入时执行的操作done(); // 这是告诉 Vue 过渡结束的标志},afterEnter(el) {// 在元素进入之后执行的操作},enterCancelled(el) {// 如果进入过渡被取消},},data() {return {show: true,};},
};
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>
🍆beforeLeave, leave, afterLeave, leaveCancelled

这组钩子函数用于定义元素离开时的过渡效果。

<template><transition name="fade" @before-leave="beforeLeave" @leave="leave" @after-leave="afterLeave" @leave-cancelled="leaveCancelled"><p v-if="show">Hello, Vue!</p></transition>
</template><script>
export default {methods: {beforeLeave(el) {// 在元素离开之前执行的操作},leave(el, done) {// 在元素离开时执行的操作done(); // 这是告诉 Vue 过渡结束的标志},afterLeave(el) {// 在元素离开之后执行的操作},leaveCancelled(el) {// 如果离开过渡被取消},},data() {return {show: true,};},
};
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 1s;
}
.fade-enter, .fade-leave-to {opacity: 0;
}
</style>

通过这些 JavaScript 钩子函数,我们可以更加灵活地控制过渡效果的细节,执行一些自定义的操作。

🥑结语

Vue.js 提供了丰富的工具和特性,使得动画在前端开发中变得更加简便而强大。通过合理使用过渡效果、动画钩子函数以及相关的高级特性,我们能够创建出更具创意和吸引力的用户界面。在实际项目中,结合具体需求和设计思路,深入理解并灵活应用这些动画特性,将会为用户提供更为优秀的交互体验。


🏫博客主页:魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️


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

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

相关文章

四十六----react路由

一、react 路由使用 import {render } from "react-dom"; import {BrowserRouter,Routes,Route, } from "react-router-dom"; // import your route components too render(<BrowserRouter><Routes><Route path="/" element={&l…

Vue学习笔记-Vue3的toRef和toRefs

toRef 作用&#xff1a;创建一个ref对象&#xff0c;其value值指向与其绑定的数据对象中的某个属性&#xff0c;当toRef创建的对象值改变时&#xff0c;与其绑定的响应式对象中对应的属性也发生改变导入&#xff1a;import {toRef} from vue使用&#xff1a;const name toRef…

OSG基础学习 - 顶点数组类型、法线、绘制四边形

之前已经学习了osg加载场景的基本流程; Geometry类型是一个几何体对象;定义一个几何体对象geom1; Vec3Array是向量数组类型,定义该类型的变量v1; v1调用push_back方法放入4个向量,Vec3是三维向量; 并把v1设置为geom1的顶点数组; 法线也是用一个三维向量表示; 定义一…

Python【Matplotlib】图例可拖动改变位置

代码&#xff1a; import matplotlib.pyplot as plt from matplotlib.widgets import Button# 创建一个示例图形 fig, ax plt.subplots() line, ax.plot([1, 2, 3], labelLine 1)# 添加图例 legend ax.legend(locupper right, draggableTrue)# 添加一个按钮&#xff0c;用于…

mybatis动态SQL-sql片段

1、建库建表 create database mybatis-example; use mybatis-example; create table emp (empNo varchar(40),empName varchar(100),sal int,deptno varchar(10) ); insert into emp values(e001,张三,8000,d001); insert into emp values(e002,李四,9000,d001); insert into…

Electron 中创建透明窗口

在开发 Electron 应用时&#xff0c;可能需要创建完全透明的窗口&#xff0c;比如我们要做一个屏幕内容共享的功能&#xff0c;在特定矩形区域内的内容才会被共享出来&#xff0c;而这个区域是一个透明且可被穿透的区域。 首先我们需要再主进程上创建一个矩形窗口 const scre…

简单电子报警器设计与制作方法

简单电子报警器设计与制作方法 注&#xff1a; 1、按上图连接好。 2、改变R&#xff58;的大小即使基极电路的电流发生改变&#xff0c;使频率发生改变。 3、增大电容&#xff0c;有利于低音向第一个三极管的基极反馈&#xff0c;因此最终 输出频率变低。 4、R2处接光敏电阻…

数据结构和算法-AOV与AOE网络和(逆)拓扑排序与关键路径

文章目录 AOV网络拓扑排序代码实现时间复杂度 逆拓扑排序实现DFS算法实现逆拓扑排序小结 AOE网络关键路径求关键路径求事件最早发生时间求事件最迟发生时间求活动最早发生时间求活动最迟发生时间求活动余量 关键活动 关键路径的特性小结 AOV网络 必须是DAG图&#xff08;有向无…

Microsoft刷题记录

PASS区 串联字符串的最大长度通知所有员工所需的时间单词搜索 PASS但非最优 合并区间实现 Trie (前缀树) 非PASS区 将石头分散到网格图的最少移动次数去除重复字母和为K的子数组颜色分类 注意 dfs 应该是i1&#xff0c;而不是idx1&#xff0c;老容易写错

本科论文降重修改技巧 神码ai

大家好&#xff0c;今天来聊聊本科论文降重修改技巧&#xff0c;希望能给大家提供一点参考。 以下是针对论文重复率高的情况&#xff0c;提供一些修改建议和技巧&#xff0c;可以借助此类工具&#xff1a; 本科论文降重修改技巧 对于本科论文的写作&#xff0c;降重修改是一个…

C++ I/O操作---输入输出

本文主要介绍C I/O操作中的输入输出流。 目录 1 输入输出 2 输入输出流分类 3 C中的输入输出流 4 iostream 5 std::ofstream 6 std::fstream 7 std::getline 1 输入输出 C的输入输出是数据在不同设备之间的传输&#xff0c;即在硬盘、内存和外设之间的传输。 数据如水流…

飞天使-docker知识点6-容器dockerfile各项名词解释

文章目录 docker的小技巧dockerfile容器为什么会出现启动了不暂停查看docker 网桥相关信息 docker 数据卷 docker的小技巧 [rootlight-test playbook-vars[]# docker inspect -f "{{.NetworkSettings.IPAddress}}" d3a9ae03ae5f 172.17.0.4docker d3a9ae03ae5f:/etc…

【idea】解决sprintboot项目创建遇到的问题

目录 一、报错Plugin ‘org.springframework.boot:spring-boot-maven-plugin:‘ not found 二、报错java: 错误: 无效的源发行版&#xff1a;17 三、java: 无法访问org.springframework.web.bind.annotation.CrossOrigin 四、整合mybatis的时候&#xff0c;报java.lang.Ill…

电子元器件介绍——二极管(四)

电子元器件介绍 文章目录 电子元器件介绍前言一、二极管的基础知识二、二极管的分类三、二极管的应用总结 前言 这一节我们看一下二极管。 一、二极管的基础知识 PN结&#xff1a;是指一块半导体单晶&#xff0c;其中一部分是P型区&#xff0c;其余部分是N型区。 在电场作用…

听GPT 讲Rust源代码--src/tools(14)

File: rust/src/tools/rust-analyzer/crates/cfg/src/lib.rs 在Rust源代码中&#xff0c;rust/src/tools/rust-analyzer/crates/cfg/src/lib.rs这个文件是Rust语言分析器&#xff08;Rust Analyzer&#xff09;的一部分&#xff0c;用于处理和管理条件编译指令&#xff08;Cond…

打破涨粉瓶颈!如何通过视频号找热门话题?

如果你正在运营视频号&#xff0c;相信你一定会遇到这样的瓶颈&#xff0c;视频号播放不理想&#xff0c;牟足劲想涨几个粉丝&#xff0c;结果还掉粉了&#xff1f;今天我们就聊聊如何通过视频号找热门话题! 当你的播放和粉丝增长停滞 数据不好的的时候需要更新迭代 同时还需…

DeciLM-7B:突破极限,高效率、高精准度的70亿参数AI模型

引言 在人工智能领域&#xff0c;语言模型的发展速度令人瞩目。Deci团队最近推出了一款具有革命性意义的语言模型——DeciLM-7B。这款模型在速度和精确度上都实现了显著的突破&#xff0c;以其70亿参数的规模&#xff0c;在语言模型的竞争中脱颖而出。 Huggingface模型下载&am…

数据库通用语法DML-MySQL

DML&#xff08;数据操作语言&#xff09; 添加数据 指定字段&#xff1a; INSERT INTO 表名 (字段名1, 字段名2, ...) VALUES (值1, 值2, ...); 全部字段&#xff1a; INSERT INTO 表名 VALUES (值1, 值2, ...); 批量添加数据&#xff1a; INSERT INTO 表名 (字段名1, 字段…

torch中张量与数据类型的介绍

PyTorch张量的定义介绍 PyTorch最基本的操作对象是张量&#xff0c;它表示一个多维数组&#xff0c;类似NumPy的数组&#xff0c;但是前者可以在GPU上加速计算 初始化张量 ttorch.tensor([1,2]) # 创建一个张量 print(t) t.dtype #打印t的数据类型为torch.int…

尺度函数与小波函数

尺度函数与小波函数 尺度函数 设存在函数 φ j , k ( x ) 2 j / 2 φ ( 2 j x − k ) \varphi_{j,k}(x)2^{j/2}\varphi(2^{j}x-k) φj,k​(x)2j/2φ(2jx−k) 对所有的 j j j, k ∈ Z k{\in}\mathbb{Z} k∈Z 和 φ ( x ) ∈ L 2 ( R ) \varphi(x){\in}L^2(R) φ(x)∈L2(R)…