[英]How to remove an infinite animation from a hidden element
The scenario is like this:场景是这样的:
two adjacent element两个相邻元素
A & B, overlapping elements(A has absolute positioning) both toggle between CSS transform scale(0) to scale(1) ie when A is shown B is hidden A & B,重叠元素(A 具有绝对定位)在 CSS 转换比例(0)到比例(1)之间切换,即当显示 A 时,隐藏 B
I have applied an infinite animation on A (SVG opacity changing grom 0.7-1).我在 A 上应用了无限 animation(SVG 不透明度更改 grom 0.7-1)。
When A is hidden, it's animation still seems to be working.当 A 被隐藏时,它的 animation 似乎仍在工作。
How to fix this without using display: none如何在不使用显示的情况下解决此问题:无
You can remove a class with animation for A, and then, if the animation needs to be resumed, return the class with the animation again. You can remove a class with animation for A, and then, if the animation needs to be resumed, return the class with the animation again.
I think the best approach to do this would be setting animation: none
or animation: unset
when A is hidden.我认为最好的方法是设置
animation: none
或animation: unset
when A 被隐藏。 You can set up a watcher, like this one , to watch for A's property changes and then use an if conditional to check if it has reached its "hidden state."您可以设置一个像这样的观察器来观察 A 的属性更改,然后使用 if 条件检查它是否已达到其“隐藏的 state”。 Then you can
document.getElementById('its id').style.animation = unset
然后你可以
document.getElementById('its id').style.animation = unset
A bonus tip would be using
else
to set the animation property back to normal once it is "unhidden."额外提示将使用
else
将 animation 属性设置为“未隐藏”后恢复正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.