当前位置:首页 > 技术分析 > 正文内容

Vue3实战笔记(26)—有趣的动画——transition

ruisui883个月前 (02-03)技术分析9

前言

学习了几天路由,今天


放松一下,来点有趣的事情,给路由加个动画。



一、路由动画切换

官方文档是这样说的,在想要跳转的路由外面加一层:





然而:


    
       
        
      
    
    
    
    
       
        
      
    

动画是可以自己定义的,然后在style中:



其中,name的作用就是定义你style的开头名称,默认是v开头,例如:
v-enter-active替换成了fade-enter-active

试试去吧非常炫酷!


总结

在 Vue 中添加路由动画,可以使用 Vue 的内置过渡效果结合 Vue Router,可以定义各种各样的动画,提高用户体验,Vue Router 的过渡效果还可以更加复杂和精细,比如可以根据不同的路由使用不同的过渡效果,或者在多个组件之间进行过渡。后面会实战几种好看的动画和详细的使用方法以及源码。

你要相信,看似不起波澜的日复一日,会突然在某一天让人看到坚持的意义。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/808.html

分享给朋友:

“Vue3实战笔记(26)—有趣的动画——transition” 的相关文章

代码管理-9-gitlab的使用和设置

gitlab使用1、外观设置完成后保存,返回登录页面查看关于注册,有些公司是不允许打开的,,有些人数非常多的公司就需要打开注册的功能,让人员自己注册,我们来给他特定的权限就可以,毕竟人非常多的时候还由我们来给她们注册就非常不现实了,工作量会很大2、自动注册3、组&用户&项目创建组设置组名称、描述等创...

双子座应用程序推出模型切换器以在Android上访问2.0

#头条精品计划# 快速导读谷歌推出了Gemini 2.0 Flash实验版,现已在其安卓应用中可用,之前仅在gemini.google.com网站上提供。新版本的15.50包含模型切换器,用户可以在设置中选择不同模型,包括1.5 Pro、1.5 Flash和2.0 Flash实验版。谷歌提醒,2.0...

vue v-html动态生成的html怎么加样式/事件

1、动态生成的html,样式不生效//html 布局 <view v-html="html"> {{html}} </view> //动态生成的元素 <view class="btngo" @tap="handleLink...

Vue Router 4 路由操作 - 路由导航

路由导航分为 声明式导航 和 编程式导航。通过 <router-link to="..."> 标签跳转的方式为声明式导航。通过 路由实例对象(router.push(...))跳转的为编程式导航。导航到不同的位置想要导航到不同的URL,使用 router.push 方法。...

vue开发微信小程序 - 登录组件

移动端登录功能抽象为通用组件,满足:不同移动端应用中一键登录功能复用支持多种登录:微信登录、H5、QQ登录登录组件使用//引用登录组件 import login from "../components/user/login.vue" export default { compone...

基于Spring Cloud+VUE的多租户小程序商城源码「快速二开可商用」

一、系统介绍JooLun平台是一个专注微信快速二开系统研发的平台,采用Java语言开发,使用的是最新微服务前后端分离技术,目前有公众号和小程序商城两个版本,有公众号后台管理、小程序商城。基于Spring Cloud微服务+VUE实现的核心框架多租户小程序商城源码,核心框架采用SpringBoot2+...