Vue - 关于Router路由跳转时显示的animate.css动画

Vue - 关于Router路由跳转时显示的animate.css动画

在Vue中,操作路由跳转时页面是闪白的,没有动画效果,我们可以通过在router-view中设置transition,并搭配animate丰富的动画效果来美化路由跳转时的显示效果.

1.安装animate

npm i -S animate.css

2.在main中引入animate.css

import 'animate.css'

3.在需要路由router-view跳转的页面中设置

如果用< transition >包裹< router-view >会出现leave-active-class动画失效

<template><router-view class="view" v-slot="{ Component }"><transitionmode="out-in"enter-active-class="animate__animated animate__fadeInRight"leave-active-class="animate__animated animate__fadeOutLeft"><component :is="Component" /></transition></router-view>
</template>

效果如下:

在这里插入图片描述

目前 Vue 的transition内置标签只能控制一种动画类型,要么是 CSS transition 过渡动画,要么是 CSS animation 关键帧动画。

CSS transition 过渡动画:

  1. v-enter-from 淡入效果的起始状态。它先附加到元素上,然后元素被插入 DOM 树。插入 DOM 树后,下一帧该类被立即移除。

  2. v-enter-active 淡入效果的过渡状态,整个过渡期间生效。该类用于设定动画时长、延时和缓动曲线(easing curve)等动画参数。

  3. v-enter-to 淡入效果的最终状态。当 v-enter-from 类被移除的同时,添加 v-enter-to 类。当过渡动画结束后,移除 v-enter-to 类。

  4. v-leave-from 淡出效果的起始状态。

  5. v-leave-active 淡出效果的过渡状态。

  6. v-leave-to 淡出效果的最终状态。

CSS animation 关键帧动画:

  1. enter-from-class

  2. enter-active-class

  3. enter-to-class

  4. leave-from-class

  5. leave-active-class

  6. leave-to-class

对于关键帧动画,只需设定 enter-active-classleave-active-class 即可。

注意事项:

问题:
淡出和淡入同时发生
解决方法:
默认情况下,元素的淡出和淡入是同时发生的。设定属性 mode=“out-in”,可以协调不同元素的动画时序,先淡出后淡入。

参考链接:
animate动画:https://animate.style/

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

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

相关文章

Java使用类加载器解决类冲突,多版本jar共存

Java使用类加载器解决类冲突 1、案例说明2、打包新版本POI并将要调用的方法封装2.1、POM文件2.2、封装的方法 3、要使用多个POI版本的项目3.1、打包前面的项目生成一个jar包3.1、POM文件3.2、类加载器代码3.3、Jar加载工具3.4、最终调用 1、案例说明 项目中已经有了一个旧版本…

奖项再+1!通义灵码智能编码助手通过可信 AI 智能编码工具评估,获当前最高等级

阿里云的通义灵码智能编码助手参与中国信通院组织的可信AI智能编码工具首轮评估&#xff0c;最终获得 4 级评级&#xff0c;成为国内首批通过该项评估并获得当前最高评级的企业之一。 此次评估以《智能化软件工程技术和应用要求 第 2 部分&#xff1a;智能开发能力》为依据&…

别给智能猫砂盆花冤枉钱了!这三款好用智能猫砂盆哪个更好用?

节假日回老家&#xff0c;不方便带猫咪怎么办&#xff1f;而且猫咪这么能拉&#xff0c;猫砂盆里拉满了又怎么办&#xff1f;猫砂盆一满&#xff0c;就会变脏&#xff0c;变脏了小猫就会抗拒上厕所&#xff0c;从而在家里找其他干净的地方排泄&#xff0c;那我们要怎么保证不在…

python中 if __name__ == “__main__“的代码没被执行

运行pytest 和unittest时&#xff0c;if name “main”: 下的代码没有被执行&#xff0c;发现__name__等于模块名 一、“name” 的作用 1、 __name__是python的一个内置类属性&#xff0c;它天生就存在于一个 python 程序中。 2、直接运行python程序时&#xff0c;__name__的…

报错:Reached the max session limit(DM8 达梦数据库)

报错:Reached the max session limit - - DM8 达梦数据库 1 环境介绍2 数据库启动SYSTEM IS READY后面日志3 数据库刚启动日志4 达梦数据库学习使用列表 1 环境介绍 某项目无法连接数据库,报错:超过最大会话数限制 , 检查 dmdba ulimit -a openfiles 已改检查 dm.ini 其中 MAX…

提升效率!ArcGIS中创建脚本工具

在我们日常使用的ArcGIS中已经自带了很多功能强大的工具&#xff0c;但有时候遇到个人的特殊情况还是无法满足&#xff0c;这时就可以试着创建自定义脚本工具。 一、编写代码 此处的代码就是一个很简单的给图层更改别名的代码。 1. import arcpy 2. input_fc arcpy.GetParam…

针对不同区域的摄像头,完成不同的算法配置的智慧快消开源了

智慧快消视频监控平台是一款功能强大且简单易用的实时算法视频监控系统。它的愿景是最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;从而大大减少企业级应用约95%的开发成本。 基于多年的深度…

js逆向--cai招网

js逆向--cai招网 一、寻找加密入口1、抓包2、关键字搜索寻找加密入口二、调试js三、python代码实现一、寻找加密入口 1、抓包 目标数据来源网址为:https://search.bidcenter.com.cn/search?keywords=%E5%85%AC%E5%85%B1%E4%BD%8F%E5%AE%85,打开开发者工具进行抓包。 目标…

Web安全之GroovyShell讲解:错误与正确示范,安全问题与解决方案

1. 引言 Groovy 是一门基于 Java 虚拟机&#xff08;JVM&#xff09;的动态语言&#xff0c;而 GroovyShell 是 Groovy 提供的一个灵活强大的脚本执行工具。通过 GroovyShell&#xff0c;开发者可以在运行时动态执行 Groovy 脚本&#xff0c;它的灵活性非常适合那些需要动态编…

DPO:直接偏好优化简化语言模型的偏好训练

人工智能咨询培训老师叶梓 转载标明出处 如何精确控制大规模无监督语言模型&#xff08;LMs&#xff09;的行为一直是一个挑战。这些模型虽然通过大量数据学习到了广泛的世界知识和一些推理技能&#xff0c;但由于其训练的无监督性质&#xff0c;使得它们的行为难以精确控制。…

Error running tomcat: Can‘t find catalina.jar

一、错误描述&#xff1a; 在运行 java-web项目时出现报错&#xff1a;Error running tomcat: Can‘t find catalina.jar 二、错误原因&#xff1a; tomcat的路径错误&#xff0c;在idea中配置正确的tomcat路径 三、解决方法&#xff1a; 1.点击EditConfigurations 2.点…

RP2040 C SDK clocks时钟源配置使用

RP2040 C SDK clocks时钟源配置使用 &#x1f33f;RP2040时钟源API函数文档&#xff1a;https://www.raspberrypi.com/documentation/pico-sdk/hardware.html#group_hardware_clocks &#x1f341;RP2040时钟树&#xff1a; 系统时钟源可以来自外部时钟输入&#xff08;exte…

4000字三合一!Stata、SPSS、MATLAB实现多元线性回归详解!

参加数学建模的小伙伴要注意了&#xff1a;多元线性回归几乎是所有分析方式里面最核心、最常用、最全面的模型&#xff0c;博主本科大致参加了10次数模&#xff0c;还有一次正大杯市场调研赛&#xff0c;其中获得拿得出手的奖有9次&#xff0c;有5次都用到了多元线性回归——至…

山东大学OLED透明展示柜案例:科技赋能,创新展示新体验

随着科技的飞速发展&#xff0c;显示技术也在不断突破传统界限&#xff0c;为各行各业带来了全新的展示体验。山东大学集成攻关大平台展厅近期引入了OLED透明展示柜&#xff0c;这一创新举措不仅提升了展厅的展示效果&#xff0c;还为参观者带来了前所未有的互动体验。 背景介绍…

KADAL | Kriging代理模型Python工具箱推荐

用于分析、设计优化和探索的Kriging工具箱 简介Required packagesQuick ExamplesContact特别感谢&#xff1a;参考资料 简介 用于分析、设计优化和探索的克里金法 (Kriging for Analysis, Design optimization, And expLoration, KADAL) 是由万隆理工学院 (Institut Teknologi…

缓存对象反序列化失败

未定义serialVersionUID&#xff0c;会自动生成序列化号 新增了属性&#xff0c;序列号就变了&#xff0c;导致缓存对象反序列化失败。 所有缓存对象必须指定序列化id&#xff01; 那我如何找到未添加字段前 对象的序列化号呢&#xff1f;默认的序列化号是如何生成的呢&#…

身份证实名认证-实名认证API接口文档

1、接口介绍及适用范围 身份证实名认证是指通过验证个人身份证信息的真实性&#xff0c;来确认用户身份的一种安全验证方式。这种认证方式广泛应用于各种需要身份验证的场合&#xff0c;如金融交易、社交媒体注册、网络游戏登录、电子商务平台购物等。 2、接口地址 输入姓名和…

C语言手撕实战代码_二叉树_构造二叉树_层序遍历二叉树_二叉树深度的超详细代码实现

二叉树习题1.通过前序序列和中序序列构造二叉树2.通过层次遍历序列和中序序列创建一棵二叉树3.求一棵二叉树的结点个数4.求一棵二叉树的叶子节点数5.求一棵二叉树中度为1的节点个数6.求二叉树的高度7.求一棵二叉树中值为x的节点作为根节点的子树深度8.判断两棵树是否相似&#…

如何构建短视频矩阵?云微客开启多账号协同作战

你有没有疑惑过&#xff0c;为什么有些账号每一次发布视频&#xff0c;都要艾特一下其他账号呢&#xff1f;那些被艾特的账号&#xff0c;你有点进去关注过吗&#xff1f;其实做过运营的都或多或少的接触过矩阵&#xff0c;短视频矩阵的玩法现在也逐步成为了趋势。企业通过多账…

亿佰特-NT1/NT1-B串口转RJ45以太网模块

亿佰特-NT1/NT1-B串口转RJ45以太网模块 模块概要连接方式配置模块亿佰特网络配置助手配置模块网页版配置模块 串口以太网双向数据收发AT模式配置模块 模块概要 亿佰特官网 https://www.ebyte.com/ 模块概要&#xff1a; 接口方式&#xff1a;TTL串口RJ45工作电压&#xff1a…