在 iOS 设备上使用后退按钮时未触发 CSS 关键帧动画

Posted 2023-03-12

【中文标题】在 iOS 设备上使用后退按钮时未触发 CSS 关键帧动画

【英文标题】：CSS keyframe animation not triggering when using back button on iOS device

【发布时间】：2021-01-19 14:05:11

【问题描述】：

我正在页面的主体元素上运行一个关键帧动画，该动画淡入和淡出背景的不透明度。淡入动画作为 CSS 规则直接在 body 上运行，淡出是通过为 body 元素设置一个类来触发的，当点击特殊链接时。该实现在 android Chrome 浏览器和桌面 Safari、Chrome、Firefox、IE11 和 Edge 上运行良好。

当我从 ios 设备单击链接时，淡出动画效果也很好，但是一旦我在 Safari 中使用本机后退按钮，页面似乎只是返回到它保存的最后一页的上一个视图，没有再次运行淡入淡出动画。因此页面看起来损坏了。

我该如何处理？当我返回导航时，我可以以某种方式强制 iOS 设备重新加载页面吗？或者有其他方法可以处理吗？

【问题讨论】：

您找到解决方案了吗？干杯。

【参考方案1】：

当您点击返回按钮时，Safari 不会“重新加载”页面。一种常见的解决方法是在页面的页脚添加一些代码以利用 pageshow 事件。然后你可以做类似的事情。

const reloadAnimation = () => $("#my-element").removeClass("run-animation").addClass("run-animation");
window.addEventListener('pageshow', reloadAnimation)