你的网站或许离高级，，还差一个跳转动画？

在下不才徐坤:
先动画在跳转，就是为了动画而动画，好看是好看，交互时间被延长，用户被强行看动画。从业务角度说，应该是页面资源加载时给用户看动画，以vue举例，创建一个createLoadingPage高阶函数，函数调用时返回两个函数openAnimation和closeAnimation，在目标页面的beforeRouteEnter中设置开启动画，mounted中或某请求加载完后关闭动画，如果加载比较快一闪而过影响观感，可以改进上面函数，传递一个最小动画时间300ms，这样用户体验应该就能好上不少，而不是强行看动画完后再跳转[doge]

【回复】感谢建议🌹，我是从交互面出发的，考虑到一般用到转场动画的大多数都是展示页[兔年]，所以没考虑到那么多性能问题，你说的为了简短用户交互时间，加快动画这个问题，如果页面加载很快，动画时间减短，假如动画嗖的一下0.3秒就过渡了，，感觉这反而会影响交互体验[辣眼睛]，那不如不加动画，那如果把时间拉长一点的话，，为何不直接把动画放完呢[脱单doge]
【回复】动画分为三部分，第一部分进入页面是固定时间，进入之后再加载页面，这一段要让动画盖住页面，是必须固定的，具体时间自己设置，第二部分fill部分，动画盖住页面一直转圈圈那里，页面已经在加载了，这部分一直到动画第三部分退出的时间才是不固定的，视频中不是调用了一个check_loading函数检查页面加载情况吗，页面多久加载完就多久退出，意思进入和退出的时间都是固定的，中间的动画填充时间才是由页面加载完决定，你之前所说的功能，视频中简单的几句代码已经实现了，并不是你理解的让用户必须看一段完整的动画才加载，进出和退出的动画一定是固定的，你想让它快一点可以自己调整，不知道你明白我的意思没有
【回复】回复 @JIEJOE_轻敲代码 :加载动画的作用是优化用户等待体验，如果你动画播放完在跳转，跳转后页面才开始加载，如果此时页面需要网络请求后渲染，那不是还需要用户继续等待吗？前面的动画就是负体验了，没起作用。我意思是，页面加载时开启动画，页面渲染完后再关闭动画，如果这个页面请求加载渲染，由于请求是异步的，你不知道什么时候能渲染完成，所以不能固定动画时间，你视频中的案例就是先给用户看一秒动画然后跳转，不管怎么样都是先看固定一秒都动画，而网络请求有快有慢，如果这个请求一秒后成功，那么请求结束页面渲染后nextTick中关闭，那这样动画结束的时候，页面必定是已经渲染完全了，不会出现动画后还在等待。然后请求响应如果太快，比如30ms的请求响应，会照成加载动画一闪而过的情况，所以需要固定延迟，300ms不是固定的，你想设置多少都行，一般刚好加载效果能够完全展示的时间就够了，300-650ms比较好，如果动画需要1-2秒才能完全展示说明动画太复杂了，需要调整动画的时间。 你可以看看这个博客: https://paul.ren 他的这个博客页面切换动画就是页面完全渲染才切换的，由于他用的技术比较久，用的pjax，他是等页面请求完渲染后在切换地址的，vue中完全可以切路由后在开始动画。
Dubai终于有硬币改名了:
视频简介: 源代码链接： 链接见视频简介   提取码：jiej 喜欢这个视频的话，就点个赞吧❤ bilibiliAI视频总结： 如何使用转场动画实现网页跳转过程中的平滑过渡。通过添加入场、填充和退出动画,使页面跳转更加流畅。同时,还介绍了如何通过无刷跳转实现转场动画的无刷播放,解决了刷新导致动画中断的问题。然而,无刷跳转在浏览器前进后退时仍会出现bug,需要进一步解决。通过监听页面挂载事件触发转场动画的out方法,可以实现更自然的动画效果。 如何实现转场动画,包括页面跳转、转场动画内容、退出动画等,并给出实例演示。 0:01 转场动画的教程：转场动画的原理和实现方法，以及一个简单的转场动画示例。 1:28 页面跳转和转场动画：如何在页面跳转时添加转场动画，包括动画的入场、刷新跳转、退出等部分。 3:04 动画的退出和进入：如何书写转场动画的退出部分和进入部分，以及如何在动画进入时传递参数。 如何实现无刷跳转,避免刷新导致动画不流畅的问题,并解决了浏览器前进后退按钮的bug。 4:31 介绍了无刷跳转的方法，避免了刷新导致动画不流畅的问题。 6:45 动画进入页面：详细介绍了如何让动画进入页面，并设置了延迟和检查页面加载状态的操作。 8:33 前进后退按钮跳转：介绍了前进后退按钮跳转时如何保持动画的完整性和流畅性。 如何通过前进后退按钮来解决刷新跳转下的两个严重bug,从而完成转场动画。 8:41 前进后退按钮解决刷新跳转问题 8:50 转场动画完成，欢迎点赞收藏投币 8:58 下期再见

Alore唉咯咯:
我网站的转场方法直接就是：在进入网页时网页中所有元素平滑入场，切换页面时所有元素平滑退场再加载，使用同一个静态背景[吃瓜][吃瓜]

【回复】这样不会太耗性能吗？[doge]
尘世迷途陈小怪:
本来很多页面跳转就是一瞬间的事，被你这么一搞每个跳转都变得很卡一样的

黑猫yu四月:
我也想过这个效果，但每个页面都要写上动画区块和方法，实际开发中每切换一次页面就调用一个动画 多了用户体验不好，自己写着玩的肯定无所谓，我之前也做过这种 用于特定的几个页面跳转 效果类似于百叶窗延时横向移动，好玩就完了[脱单doge]

时雨Raina:
jiejoe老师做的视频好好看啊，干活也很多，支持支持！！

【回复】感谢感谢🙏🏻[打call][喜欢]
梦空白雾:
我才发现是之前那个酷炫页面的up，忘记关注了

【回复】严重批评！严重批评！严重批评！[生气]
聪明的Ray:
你好，请问能给一个学习这些动画的学习路线吗，，我认为及时的反馈很重要，否则也很难坚持下去

【回复】回复 @JIEJOE_轻敲代码 :好的，谢谢
【回复】很难吗，延迟到动画结束后跳转页面，学习个js定时器，css动画
【回复】我后面仔细想想哈，这位同学[兔年]
Nakano_Mei:
看到标题我第一反应是单页面应用，确实没想过还能这么做跳转动画[doge]

着迷YCY:
vscode主题是啥呀，这个粉色的标签看着真不错[doge]

【回复】要么是onedark要么是GitHub copilot同款主题