【Element】实现基于 Element UI el-tabs 的左右滑动动画

实现基于 Element UI el-tabs 的左右滑动动画

引言

在构建现代 web 应用时,为用户提供平滑的动画效果是提升用户体验的关键。本篇博客将详细介绍如何在使用 Vue 以及 Element UI 时,实现一个具有左右滑动效果的 tab 切换动画。

使用 el-tabs 创建 tab 组件

首先,我们需要创建一个基础的 el-tabs 组件,用于展示不同的内容区域。

<template><el-tabs v-model="activeName" @tab-click="handleTabClick"><el-tab-pane label="cpu" name="cpu"><cpu :class="tabContentClass"></cpu></el-tab-pane><el-tab-pane label="内存子系统" name="内存子系统"><nczxt :class="tabContentClass"></nczxt></el-tab-pane></el-tabs>
</template>

跟踪当前和上一次激活的 tab

我们希望了解用户是向左滑动还是向右滑动,为此需要知道当前和之前激活的 tab 的索引。

<script>
export default {data() {return {activeName: 'cpu',previousIndex: 0, // 上一个激活 tab 的索引currentIndex: 0 // 当前激活 tab 的索引};},methods: {handleTabClick(tab) {this.previousIndex = Number(this.currentIndex);this.currentIndex = Number(tab.index);this.$nextTick(() => {this.previousIndex = Number(this.currentIndex);});}},computed: {// 根据方向设置动画样式tabContentClass() {return {'slide-enter-active': true,'slide-leave-active': this.currentIndex > this.previousIndex,'slide-enter': this.currentIndex < this.previousIndex,'slide-leave-to': this.currentIndex > this.previousIndex};}}
};
</script>

动画样式

通过 CSS 我们定义了滑动进入以及滑动离开时的动画效果。

.slide-enter-active, .slide-leave-active {transition: all 0.5s;
}
.slide-enter {transform: translateX(100%);opacity: 0;
}
.slide-leave-to {transform: translateX(-100%);opacity: 0;
}

.slide-enter-active 和 .slide-leave-active 类负责定义动画的持续时间。
.slide-enter 类定义了新内容滑入的起始状态。
.slide-leave-to 类定义了旧内容滑出的终止状态。

结语

这样,我们就利用 Vue 的 computed 计算属性以及 CSS 过渡效果实现了一个简单而流畅的左右滑动动画效果,以增强 el-tabs 组件的交互体验。注意,这个效果只是一个基础的左右滑动动画,可以根据实际需要进行调整和增强。

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

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

相关文章

Flutter 中的 SliverGrid 和 GridView:区别与使用场景

在 Flutter 中&#xff0c;SliverGrid 和 GridView 都是用于展示网格布局的组件&#xff0c;但它们有着不同的特点和适用场景。本文将介绍它们之间的区别以及在实际开发中的使用场景。 SliverGrid 和 GridView 的区别 SliverGrid&#xff1a; SliverGrid 是 CustomScrollView …

第十五届蓝桥杯第三期模拟赛题单

目录 第一题&#xff1a; 第二题&#xff1a; 第三题&#xff1a; 第四题: 第五题&#xff1a; 第六题&#xff1a; 第七题 第八题 第九题 第十题 第一题 【问题描述】 请问 2023 有多少个约数&#xff1f;即有多少个正整数&#xff0c;使得 2023 是这个正整数的整数倍…

FolkMQ 是怎样进行消息的事务处理?

FolkMQ 提供了二段式提交的事务提交的机制&#xff08;TCC 模型&#xff09;。允许生产者在发送消息时绑定到一个事务中并接收事务的管理&#xff0c;以确保消息的原子性&#xff08;要么全成功&#xff0c;要么全失败&#xff09;。在 FolkMQ 中&#xff0c;事务是通过 MqTran…

1、EmlogCms代码审计

一、SQL注入 1、后台标签删除处存在1处sql注入 漏洞条件 ● 漏洞url: http://emlog6.0.com/admin/tag.php?actiondell_all_tag ● 漏洞参数&#xff1a;tag[xx] ● 是否存在限制&#xff1a;无 ● 是否还有其他条件&#xff1a;actiondell_all_tag,token复现 POST /admin…

撸chatgpt3.5 api backend-api 对接wxbot

功能是实现 web 转api 对接wxbot用&#xff0c; 直接上代码&#xff0c; 1.获取wss url def get_register_websocket():# 请求头url "https://chat.openai.com/backend-api/register-websocket"payload {}headers {Authorization: Bearer eyJhbGxxxxxxxxxxxxx…

docker的网络配置

文章目录 1、网络模式1.1、bridge模式(默认模式)1.2、host模式 2、bridge模式3、自定义网络 1、网络模式 Docker在创建容器时有四种网络模式&#xff1a;bridge/host/container/none&#xff0c;bridge为默认不需要用–net去指定&#xff0c;其他三种模式需要在创建容器时使用…

【力扣 - 最长连续数组】

题目描述 给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&…

Linux命令:uniq命令和wc命令

目录 1 uniq命令1.1 uniq简介1.2说明1.3案例1、默认输出2、输出重复行3、比较一行中的部分字符4、忽略大小写5、只显示唯一的行 2.4 uniq和sort命令配合使用1、文本统计2、统计IP连接数并排序 2 wc命令2.1 wc简介2.2 说明2.3 案例1、默认输出2、输出字节、字符数、单词数 总结 …

案例介绍:汽车维修系统的信息抽取技术与数据治理应用(开源)

一、引言 在当今汽车产业的快速发展中&#xff0c;软件已经成为提升车辆性能、安全性和用户体验的关键因素。从车载操作系统到智能驾驶辅助系统&#xff0c;软件技术的进步正在重塑我们对汽车的传统认知。我有幸参与了一个创新项目&#xff0c;该项目专注于开发和集成先进的汽…

关于 svg path 路径坐标 精度误差问题

<svg width"2838.739990" height"2482.179932" viewBox"0 0 2838.74 2482.18" fill"none" xmlns"http://www.w3.org/2000/svg" xmlns:xlink"http://www.w3.org/1999/xlink"><path id"矢量 12"…

原理篇-- 定时任务xxl-job-服务端(admin)项目启动过程--JobRegistryHelper 初始化 (4)

文章目录 前言一、JobRegistryHelper 作用&#xff1a;二、JobRegistryHelper 源码介绍&#xff1a;2.1 初始化start() 方法&#xff1a;2.1.1 registryOrRemoveThreadPool 执行器注册和移除&#xff1a;2.1.2 registryMonitorThread 执行器注册监控线程&#xff1a; 2.2 toSto…

折线图实现柱状阴影背景的demo

这个是一个由官网的基础折线图实现的流程&#xff0c;将涉及到的知识点附上个人浅薄的见解&#xff0c;源码在最后&#xff0c;需要的可自取。 折线图 成果展示代码注解参数backgroundColordataZoomlegendtitlexAxisyAxisgridseries 源码 成果展示 官网的基础折线图&#xff…

猫耳语音下载(mediadown)

猫耳语音下载(mediadown) 一、介绍 猫耳语音下载,能够帮助你下载猫耳音频节目。如果你是会员,它还能帮你下载会员节目。 二、下载地址 下载:猫耳语音下载(mediadown) 百度网盘下载:猫耳语音下载(mediadown) 三、安装教程 将下载的文件解压到D:\xibinhui,D:\Pr…

Unity RectTransform·屏幕坐标转换

RectTransform转屏幕坐标 分两种情况 Canvas渲染模式为Overlay时&#xff0c;使用此方式 public Rect GetScreenCoordinatesOfCorners(RectTransform rt) {var worldCorners new Vector3[4];rt.GetWorldCorners(worldCorners);var result new Rect(worldCorners[0].x,world…

Manomotion 实现AR手势互动-解决手势无效的问题

之前就玩过 Manomotion &#xff0c;现在有新需求&#xff0c;重新接入发现不能用了&#xff0c;不管什么办法&#xff0c;都识别不了手势&#xff0c;我记得当初是直接调用就可以的。 经过研究发现&#xff0c;新版本SDK改了写法。下边就写一下新版本的调用&#xff0c;并且实…

好书推荐 《Excel函数与公式应用大全for Excel 365 Excel 2021》

一.基本介绍 1.什么是 Excel? Excel 是微软公司开发的一款电子表格软件&#xff0c;是 Microsoft Office 套件的一部分。它被广泛用于数据处理、分析、可视化和管理等方面。Excel 提供了丰富的功能&#xff0c;使用户能够创建、编辑、存储和分享各种类型的数据表格。 2.Exc…

Golang Channel 详细原理和使用技巧

1.简介 Channel(一般简写为 chan) 管道提供了一种机制:它在两个并发执行的协程之间进行同步&#xff0c;并通过传递与该管道元素类型相符的值来进行通信,它是Golang在语言层面提供的goroutine间的通信方式.通过Channel在不同的 goroutine中交换数据&#xff0c;在goroutine之间…

代码随想录Day66 | 图的DFS与BFS

代码随想录Day66 | 图的DFS与BFS DFS797.所有可能的路径无向图和有向图的处理 BFS200.岛屿数量 DFS 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 状态 本质上就是回溯算法。 void dfs(参数) {if (终止条件) {存放结果;return;}for (选择&#xff1a;本节点所连接的…

『运维备忘录』之 Shell 内置命令大集合

前言 在 Shell 中&#xff0c;有许多内置命令可用于执行各种任务&#xff0c;包括文件操作、进程管理、环境变量设置等。本文将详细介绍一些常见的Shell内置命令及其示例用法。 命令描述alias创建命令别名&#xff0c;用于将命令或命令组合关联到用户自定义名称bg将作业放入后…

Qt textBrowser的Html相关

Qt textBrowser的Html相关 Qt textBrowser的Html相关 Qt textBrowser的Html相关 一开始就想要一个简单的功能&#xff0c;点一下按钮&#xff0c;添加的文字居中显示&#xff0c;再点一下按钮&#xff0c;添加的文字变更颜色居右显示。 但是&#xff1a; ui->textEdit-&g…