循环不覆盖 div 的样式
[英]Loop not overriding style of a div
问题描述
function lineComplete() { let line = document.getElementById("line"); for (let percentage = 0; percentage <= 100; percentage++) { setTimeout(function() { line.style.width = `${percentage}%`; }, percentage * 25); if (percentage === 100) { undo(); } } function undo() { for (let percent = 100; percent >= 0; percent--) { setTimeout(function() { line.style.width = `${percent}%`; }, percent * 25); } } }
#outLine { width: 60%; height: 20px; margin: 10px 0px; background-image: linear-gradient(to right, #f12711, #f12711); border-radius: 20px; } #line { background-image: linear-gradient(to right, #f12711, #f5af19); height: 100%; width: 100%; border-radius: 20px; }
<body onload="lineComplete()"> <div id="outLine"> <div id="line"></div> </div> </body>
In the above snippet, I am trying to show a loader-like effect which I am able to achieve.
在上面的片段中，我试图展示我能够实现的类似加载器的效果。 The problem is that when the width of line is 100%, I am trying to fire the function undo .问题是当line宽度为 100% 时，我试图触发 function undo 。 This also works fine.这也很好用。 There is a loop in undo which decreases the width of line and gradually bring its width to 0%. undo中有一个循环，它减小了line的宽度并逐渐将其宽度变为0%。 The loop also works fine as I have tried to run it after replacing its contents with alert() and it worked fine.该循环也可以正常工作，因为我在用alert()替换其内容后尝试运行它并且它工作正常。 But with the present situation, the loop is not resizing the line .但是在目前的情况下，循环并没有调整line的大小。 I think that it is not able to override the styles.我认为它无法覆盖 styles。
2 个解决方案
解决方案1
4 2020-07-15 11:49:55
You can simplify your code like this.您可以像这样简化代码。 No forloop and setTimeout needed.不需要 forloop 和 setTimeout。
function lineComplete() { let line = document.getElementById("line"); line.classList.add("active"); line.addEventListener("transitionend", () => { line.classList.remove("active"); }); }
#outLine { width: 60%; height: 20px; margin: 10px 0px; background-image: linear-gradient(to right, #f12711, #f12711); border-radius: 20px; overflow: hidden; } #line { background-image: linear-gradient(to right, #f12711, #f5af19); height: 100%; width: 0%; border-radius: 20px; transition: 2s linear; } #line.active { width: 100%; }
<body onload="lineComplete()"> <div id="outLine"> <div id="line"></div> </div> </body>
Also can be done with only animations:也可以只用动画来完成：
#outLine { width: 60%; height: 20px; margin: 10px 0px; background-image: linear-gradient(to right, #f12711, #f12711); border-radius: 20px; overflow: hidden; } #line { background-image: linear-gradient(to right, #f12711, #f5af19); height: 100%; width: 0%; border-radius: 20px; transition: 4s linear; } #line.active { animation: linecomplete 2s linear forwards; /* you can use "infinite" instead of "forwards" if you want */ } @keyframes linecomplete { 50% { width: 100%; } }
<div id="outLine"> <div id="line" class="active"></div> </div>
解决方案2
2 已采纳 2020-07-15 11:52:02
function lineComplete() { let line = document.getElementById("line"); for (let percentage = 0; percentage <= 100; percentage++) { setTimeout(function() { line.style.width = `${percentage}%`; if (line.style.width === "100%") { undo(); } }, percentage * 25); } function undo() { for (let percent = 100; percent >= 0; percent--) { setTimeout(function() { line.style.width = `${100 - percent}%`; }, percent * 25); } } }
#outLine { width: 60%; height: 20px; margin: 10px 0px; background-image: linear-gradient(to right, #f12711, #f12711); border-radius: 20px; } #line { background-image: linear-gradient(to right, #f12711, #f5af19); height: 100%; width: 100%; border-radius: 20px; }
<body onload="lineComplete()"> <div id="outLine"> <div id="line"></div> </div> </body>
The problem was that when you decrease, the later iterations are scheduled to run earlier than the earlier iterations.问题是当你减少时，后面的迭代会比前面的迭代更早地运行。 Let's negate percentage (100 - percentage) and it will work.让我们否定百分比(100 - percentage) ，它会起作用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.