vue-router学习9:过渡动效transition

<transition> 组件

<transition> 是 Vue 提供的一个内置组件,它可以为被包裹的元素或组件添加进入、离开和列表的过渡效果。当包裹的元素或组件的状态改变时(例如,v-if 的条件变化或路由切换),<transition> 组件会自动触发过渡效果。

Vue Router 过渡动效

在 Vue Router 中,我们通常将 <transition> 组件包裹在 <router-view> 组件外层,这样当路由发生变化时,<router-view> 中的组件切换就会带有过渡效果。

例子:

<template>  <div id="app">  <!-- 使用 transition 包裹 router-view,添加过渡效果 -->  <transition name="slide" mode="out-in">  <router-view />  </transition>  </div>  
</template>  <script setup lang="ts">  
import { defineComponent } from 'vue';  
import { createRouter, createWebHistory } from 'vue-router';  
import Home from './views/Home.vue';  
import About from './views/About.vue';  // 定义路由  
const routes = [  { path: '/', component: Home },  { path: '/about', component: About },  
];  // 创建路由实例  
const router = createRouter({  history: createWebHistory(),  routes,  
});  // 暴露路由实例,以便在模板或其他组件中使用  
defineExpose({ router });  
</script>  <style scoped>  
/* 定义过渡效果的 CSS */  
.slide-enter-active, .slide-leave-active {  transition: all 0.5s ease;  
}  
.slide-enter, .slide-leave-to {  transform: translateX(100%);  
}  
.slide-leave-active, .slide-enter-to {  transform: translateX(0);  
}  
</style>

说明:

1. 我们使用了 <transition name="slide" mode="out-in"> 来包裹 <router-view />。

  • name="slide" 指定了过渡效果的名称,这样我们就可以在 CSS 中为这个效果定义样式。mode="out-in" 表示先完成当前组件的离开过渡,然后开始新组件的进入过渡。

2. 在 <style scoped> 标签中,我们定义了过渡效果的 CSS 样式。

  • .slide-enter-active 和 .slide-leave-active 是过渡的起始和结束状态,我们在这里指定了过渡效果为 transition: all 0.5s ease;表示所有属性都将以 0.5 秒的时长和 ease 函数进行过渡。
  • .slide-enter 和 .slide-leave-to 是进入和离开的起始状态,我们设置 transform: translateX(100%); 使元素从右侧进入屏幕。
  • .slide-leave-active 和 .slide-enter-to 是离开和进入的结束状态,我们设置 transform: translateX(0); 使元素停在原位。

3. 当路由切换时,<router-view /> 中的组件会进行滑动过渡效果。

  • 从右侧滑入屏幕的是新组件,从屏幕左侧滑出的是旧组件。

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

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

相关文章

(python)动态规划

前言 曾经有一位叫做小明的年轻人,他生活在一个被困在连绵不断的山脉中的村庄里。这座村庄每年都会受到洪水的威胁,而村民们只能通过一条崎岖而危险的小路逃离洪水的侵袭。小明决定解决这个问题。他花了很长时间研究了地形图和洪水的模式,最终他发现了一种方法:他可以在山脚…

『大模型OS笔记』Meta 宣布推出 Llama 3 的介绍视频

Meta 宣布推出 Llama 3 的介绍视频 文章目录 一. Meta 宣布推出 Llama 3 的介绍视频一、引言二、Llama 模型历史回顾三、Llama 3 模型介绍四、Llama 3 背后的开发思路五、许可证和生态系统六、安全和信任七、其他亮点八、未来计划九、现场演示四. 参考文献一. Meta 宣布推出 Ll…

[iOS]APP优化

一、性能优化 性能优化是一个至关重要的过程&#xff0c;它对提高应用的用户体验、增强应用的市场竞争力以及维持用户的长期参与度具有深远的影响。 1.CPU 使用优化 工具&#xff1a;Instruments (Time Profiler)使用方法&#xff1a;利用 Xcode 的 Instruments 工具中的 Ti…

Unity 异步与工作线程(多线程)

文章目录 前言一、异步加载二、工作线程总结 前言 工作线程&#xff08;多线程&#xff09;是指在一个程序中同时执行多个任务的能力。多线程编程可以提高程序的性能和响应性&#xff0c;特别是在需要同时执行多个任务的情况下。工作线程通常用于执行耗时的任务&#xff0c;以…

linux驱动-CCF-2 of_clk_provider

CCF: common clock frameword of_clk_provider 总结 1. provider 注册时钟 hws[i] desc->clk_register(cprman, desc->data); 参考https://mp.csdn.net/mp_blog/creation/editor/138153040 2. provider 注册 of_clk_provider 1. provider 创建了of_clk_provider 结构体…

R语言 统计篇之相关性分析与线性回归

《Cookbook for R》数据统计篇 相关性分析与线性回归 示例数据 # 生成一些数据 # X 呈增加趋势 # Z 呈增加趋势 (缓慢) # Y 与 xvar 成反比&#xff0c;xvar*zvar 成正比set.seed(955) xvar <- 1:20 rnorm(20,sd3) zvar <- 1:20/4 rnorm(20,sd2) yvar <- -2*xvar…

FebHost:摩洛哥.ma域名注册介绍,规则有哪些?

摩洛哥国家域名介绍 摩洛哥是位于非洲西北部的一个国家&#xff0c;北部和西部面向地中海和大西洋&#xff0c;东部和南部则与阿尔及利亚、西撒哈拉和毛里塔尼亚接壤。摩洛哥的首都是拉巴特&#xff0c;但最大城市是卡萨布兰卡。摩洛哥的官方语言是阿拉伯语和柏柏尔语&#xf…

token接口设计

token接口设计 登录/注册&#xff1a;Token生成&#xff1a;Token验证&#xff1a;Token刷新&#xff1a;总结 登录/注册&#xff1a; 首先&#xff0c;用户通过提交用户名和密码或其他认证方式登录系统&#xff0c;服务器验证通过后&#xff0c;生成Token。 Token生成&#x…

使用 Python 和 DirectShow 从相机捕获图像

在 Python 中使用 OpenCV 是视觉应用程序原型的一个非常好的解决方案,它允许您快速起草和测试算法。处理从文件中读取的图像非常容易,如果要处理从相机捕获的图像,则不那么容易。OpenCV 提供了一些基本方法来访问链接到 PC 的相机(通过对象),但大多数时候,即使对于简单的…

Github创建远程仓库(项目)

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

制作Android分区镜像

1 python生成一个sector数据 def get_oem_bootmode(): # Header size SECTOR_SIZE_IN_BYTES 512 header [0 for i in \ range(SECTOR_SIZE_IN_BYTES)] # magic # The ord() built-in function in # Python converts a character # into …

MongoDB的安装(Linux环境)

登录到Linux服务器执行 lsb_release -a &#xff0c;即可得知服务器的版本信息为&#xff1a;CentOS 7。 # CentOS安装lsb_release包 [rootlinux100 ~]# sudo yum install redhat-lsb# 查看Linux版本 [rootlinux100 ~]# lsb_release -a LSB Version: :core-4.1-amd64:core-…

git tag管理

1. Git 创建tag并推送到云端 首先&#xff0c;在本地创建一个新的tag&#xff0c;可以使用 -a 选项添加带有注释信息的annotated tag&#xff0c;或直接创建lightweight tag。例如&#xff0c;若要标记最近一次提交为 v1.0 并附带注释信息&#xff1a; # 创建带有注释信息的a…

Blender笔记之基本操作

code review! —— 2024-04-27 杭州 Blender笔记…

c++理论篇(一) ——浅谈tcp缓存与tcp的分包与粘包

介绍 在网络通讯中,Linux系统为每一个socket创建了接收缓冲区与发送缓冲区,对于TCP协议来说,这两个缓冲区是必须的.应用程序在调用send/recv函数时,Linux内核会把数据从应用进程拷贝到socket的发送缓冲区中,应用程序在调用recv/read函数时,内核把接收缓冲区中的数据拷贝到应用…

黑马程序员2024最新SpringCloud微服务开发与实战 个人学习心得、踩坑、与bug记录Day1

你好,我是Qiuner. 为记录自己编程学习过程和帮助别人少走弯路而写博客 这是我的 github gitee 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我会尽力带来有趣的内容 2024黑马程序员 SpringCloud微服务开发与实战&#xff…

FPGA高端项目:FPGA帧差算法多目标图像识别+目标跟踪,提供11套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐FPGA帧差算法单个目标图像识别目标跟踪 3、详细设计方案设计原理框图运动目标检测原理OV5640摄像头配置与采集OV7725摄像头配置与采集RGB视频流转AXI4-StreamVDMA图像缓存多目标帧差算法图像识别目标跟踪模块视频输出Xilinx系列FPGA工程源…

JET毛选学习笔记:如何利用《矛盾论》从做实验到做科研vol. 2

上一节讲完矛盾的普遍性和特殊性都已经5000字了&#xff0c;为了不影响阅读观感&#xff08;多水几篇&#xff09;&#xff0c;把他们进行了拆分&#xff0c;那我就继续侃大山吧。 五、矛盾的同一性和斗争性 先做名词解释&#xff1a; 矛盾的同一性&#xff08;统一&#xf…

【c++】cpp类的继承

目录 &#xff08;1&#xff09;继承概念与语法 &#xff08;2&#xff09;派生类的访问控制 &#xff08;3&#xff09;继承中的构造和析构 1.类型兼容性原则 2.继承中的构造析构调用原则 3.继承与组合混搭下构造和析构调用原则 &#xff08;4&#xff09;同名成员(函数…

slice

最重要的一张图 endlessSummer :summer[:5]//这是这张图真正厉害的地方为什么向函数传递slice允许在函数内部修改底层数组的元素&#xff1f; 因为slice值包含指向第一个sllice元素的指针&#xff0c;传入的slice允许在函数内部修改底层数组的元素。 复制的slice只是对底层的…