文章/答案/技术大牛

发布

问加载器CSS动画
EN

Stack Overflow用户

提问于 2020-06-09 05:20:10

回答 2查看 46关注 0票数 0

这是一个从w3schools网站复制的加载器动画示例：

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
</head>
<body>

<h2>How To Create A Loader</h2>

<div class="loader"></div>

</body>
</html>

我的页面上有一个类似的函数，用于在主页面刷新几秒钟后隐藏加载程序：

setTimeout(function() {
    $('#loadingAnimation').addClass('hidden');
  }, 1500);

现在我的问题是：

有没有一种使用JavaScript添加动画元素的方法？我的意思是，当我检查页面时，我可以更改加载程序的CSS，从而使其可见，那么如何使用JavaScript在页面上添加元素，然后删除它以使其不可更改？

#loadingAnimation{
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ffffff;
    opacity: 1;
    transition: 0.5s;
    visibility: visible;
    z-index: 10;
}

#loadingAnimation.hidden{
    opacity: 0;
    visibility: hidden;
}

我刚开始编程:)我需要你的帮助，我希望我的问题是清楚的！

javascript

html

css

回答 2

Stack Overflow用户

发布于 2020-06-09 05:41:06

有些事情你可以做，即：

将类添加到执行动画的样式中(因为这需要最少的工作量)，并添加该类的元素/将类添加到元素中。
用唯一的id创建一个新的样式元素(对于这种规模的东西来说有点太复杂了)
requestAnimationFrame --很难，很容易出错--基本上只是供参考

1: CSS：

.loadingAnimation { /* . notates a class whereas # notates an id */
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: #ffffff;
    opacity: 1;
    transition: 0.5s;
    visibility: visible;
    z-index: 10;
}

联署材料：

const loader = document.createElement("div");// Create a new div element
loader.className = "loadingAnimation"; // Add the loadingAnimation class to it
document.getElementById("root").append(loader); // Add it to an element with id root
setTimeout(function() {
    loader.remove(); // Remove the loader
}, 1500);

票数 2

Stack Overflow用户

发布于 2020-06-09 05:41:49

与其将hidden类应用于加载器元素，不如直接删除它！

setTimeout(function() {
  $('#loadingAnimation').remove();
}, 1500);

这将从DOM中删除它，并停止开发工具中的样式处理。

不过，我要补充的是，在阻止人们在自己的浏览器上摆弄网站方面，你真的无能为力，这也不是什么大问题。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/62275537

复制

相似问题

问加载器CSS动画
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载器CSS动画EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载器CSS动画
EN