如何解决切换组件时 CSS 无限动画停止移动 转载链接代码预期是什么?实际发生了什么?
转载链接
https://codesandbox.io/s/infinite-animation-bug-vanilla-xi5uh?file=/src/index.js
代码
root/
├── src/
│ ├── styles.css
│ └── index.js
└─╴index.html
styles.css 来自https://loading.io/css/
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link href="src/styles.css" />
</head>
<body>
<div class="lds-dual-ring" id="loading"></div>
<button id="toggle">toggle</button>
<script src="src/index.js"></script>
</body>
</html>
index.js
let isLoading = true;
const $toggleButton = document.getElementById("toggle");
const $loadingIndicator = document.getElementById("loading");
$toggleButton.addEventListener("click",(event)=>{
if(isLoading){
$loadingIndicator.style.display = "none";
isLoading=false
return;
}
$loadingIndicator.style.display = "";
isLoading = true
})
预期是什么?
CSS 动画正常工作。
实际发生了什么?
CSS 动画在切换时停止运行。
- env: Iphone IOS13 * 只发生在IOS13
- 复制视频
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。