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

在下不才徐坤 2024-01-12

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

♥ 300 ↩ 17

JIEJOE_轻敲代码 2024-01-11

简单提3个点哈： 1. 视频中的延迟跳转我们用的是setTimeout定时器方法，这里只是做一个简单示范，具体动画复杂的情况下，我们最好搭配动画框架，例如用gsap来监听动画结束事件，然后控制跳转。 2. 动画的核心原理就如视频中那样，具体要什么样的动画，可以结合自己的需求设计，但是万变不离其中，一定要记住动画的三个要素，in、fill、out。当然，也不乏有特殊的动画。 3. 许多网页实际在进行转场动画的时候，地址栏已经改变了，而视频中我们是先动画，再改变地址栏，这里JIEJOE不清楚他们用的是什么方法，毕竟这个动画是我自己琢磨的，但至少现在，JIEJOE用这个方法还没有出过大的BUG，欢迎懂这个的小伙伴在评论区补充。

♥ 94 ↩ 3

唉咯咯 2024-01-12

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

♥ 58 ↩ 4

Dubai终于有硬币改名了 2024-01-11

视频简介: 源代码链接：链接见视频简介提取码：jiej 喜欢这个视频的话，就点个赞吧❤ bilibiliAI视频总结：如何使用转场动画实现网页跳转过程中的平滑过渡。通过添加入场、填充和退出动画,使页面跳转更加流畅。同时,还介绍了如何通过无刷跳转实现转场动画的无刷播放,解决了刷新导致动画中断的问题。然而,无刷跳转在浏览器前进后退时仍会出现bug,需要进一步解决。通过监听页面挂载事件触发转场动画的out方法,可以实现更自然的动画效果。如何实现转场动画,包括页面跳转、转场动画内容、退出动画等,并给出实例演示。 0:01 转场动画的教程：转场动画的原理和实现方法，以及一个简单的转场动画示例。 1:28 页面跳转和转场动画：如何在页面跳转时添加转场动画，包括动画的入场、刷新跳转、退出等部分。 3:04 动画的退出和进入：如何书写转场动画的退出部分和进入部分，以及如何在动画进入时传递参数。如何实现无刷跳转,避免刷新导致动画不流畅的问题,并解决了浏览器前进后退按钮的bug。 4:31 介绍了无刷跳转的方法，避免了刷新导致动画不流畅的问题。 6:45 动画进入页面：详细介绍了如何让动画进入页面，并设置了延迟和检查页面加载状态的操作。 8:33 前进后退按钮跳转：介绍了前进后退按钮跳转时如何保持动画的完整性和流畅性。如何通过前进后退按钮来解决刷新跳转下的两个严重bug,从而完成转场动画。 8:41 前进后退按钮解决刷新跳转问题 8:50 转场动画完成，欢迎点赞收藏投币 8:58 下期再见

♥ 26 ↩ 1