Javascript 如何在JS上累积期间使用CSS转换？（代码突然不起作用）

我已经使用此代码来移动特定元素，并同时使用

转换：立方贝塞尔

累积CSS属性的

值

（例如：

左

）。我在2~3天前检查过这个代码是否有效，但今天，突然，

转换

由于未知原因不再有效

代码如下：

“严格使用”；
类集合{
建造商（要素、附件、名称、单位）{
this.elem=document.querySelector（elem）；
this.acc=acc；
this.name=name；
这个。单位=单位；
}
calc（）{
让displayOn=this.elem.style.display；
this.elem.style.display='none'；
让currentProp=window.getComputedStyle（this.elem，null）.getPropertyValue（this.name），
S2N=parseInt（currentProp，10）；
this.elem.style.display=displayOn；
这是股票（S2N）；
}
股票（价值）{
让数字=（值*1）+this.acc；
this.elem.style.left=数字+this.unit；
log（this.elem.style.left）；
}
}
让proassembly=new assembly（'.button'，10'，left'，'%'）；
设置间隔（（）=>{
proassembly.calc（）；
}，1500）

*{
保证金：0；
填充：0；
}
.按钮{
位置：绝对位置；
宽度：200px；
左：10%；
背景颜色：紫色；
过渡：左1000ms；
}

测验

这可能是由于内部优化。发生的情况是，浏览器正在批量更改样式并将它们全部添加到一起，即使您单独添加它们。这意味着左侧的

未被转换。如果尝试将任何属性与
display:none
一起转换为其他属性，也会发生同样的情况

如果浏览器以前没有做过这种优化，那么现在他们正在做，这就是你的代码被破坏的原因

有一个简单的解决方案，就是在setTimeout的回调中运行
stock
，如下所示：
setTimeout（（）=>this.stock（S2N），0）。通过在以后安排更改（即使更改时间为0毫秒，它仍会添加到队列中，并且不会立即执行，因此选择退出），您可以选择退出优化。您可以在下面的代码段中看到这一点。这是最简单的修复方法

另一种可能的解决方案是自己计算百分比，而不是设置
display:none
来获取百分比值。据我所知，这种行为没有很好的定义，将来可能会改变。您可以这样计算左值的百分比：

Math.floor(window.innerWidth / parseInt(currentProp, 10))

您可以在
assembly
对象的实例化过程中执行此操作，或者在类中创建某种逻辑来检测
单元是否为百分比

最后一点警告：向左转换
效率相当低。尝试转换
转换：translateX（值）
属性。这对于渲染性能来说要好得多


“严格使用”；
类集合{
建造商（要素、附件、名称、单位）{
this.elem=document.querySelector（elem）；
this.acc=acc；
this.name=name；
这个。单位=单位；
}
calc（）{
让displayOn=this.elem.style.display；
this.elem.style.display='none'；
让currentProp=window.getComputedStyle（this.elem，null）.getPropertyValue（this.name），
S2N=parseInt（currentProp，10）；
this.elem.style.display=displayOn；
如果（S2N<100）{
setTimeout（（）=>this.stock（S2N），0）；
}
}
股票（价值）{
让数字=（值*1）+this.acc；
this.elem.style.left=数字+this.unit；
this.elem.addEventListener（'transitionend'，this.calc.bind（this），{once:true}）
log（this.elem.style.left）；
}
}
让proassembly=new assembly（'.button'，10'，left'，'%'）；
proassembly.calc（）
*{
保证金：0；
填充：0；
}
.按钮{
位置：绝对位置；
宽度：200px；
左：0；
背景颜色：紫色；
过渡：左1000ms；
}

测验
我发现解决方案适用于@EmanueleFeliziani的答案。但是有点难看

隐藏代码到布尔标志以进行阻塞，直到完成为止

将
setTimeout（）的计时器设置为至少100。除非，否则在
CTRL+MWing
时转换将无法再次工作

之后，它将顺利运行

再次感谢您回答@EmanueleFeliziani

最后一件事，我曾尝试使用
Math.floor
自己计算百分比，但浏览器抛出了
无限
。o、 o


“严格使用”；
类集合{
建造商（要素、附件、名称、单位）{
this.elem=document.querySelector（elem）；
this.acc=acc；
this.name=name；
这个。单位=单位；
this.trigger=true；
设置间隔（（）=>{
这个.calc（）；
}, 1000);
}
calc（）{
如果（这个触发器）{
this.trigger=false；
让displayOn=this.elem.style.display；
this.elem.style.display='none'；
让currentProp=window.getComputedStyle（this.elem，null）.getPropertyValue（this.name），
S2N=parseInt（currentProp，10）；
this.elem.style.display=displayOn；
setTimeout（（）=>this.stock（S2N），100）；
}
}
股票（价值）{
如果（！this.trigger）{
console.log（'test'）；
让数字=（值*1）+this.acc；
this.elem.style.left=数字+this.unit；
this.trigger=true；
}
}
}
让proassembly=new assembly（'.button'，10'，left'，'%'）
*{
保证金：0；
填充：0；
}
.按钮{
位置：绝对位置；
宽度：200px；
左：0%；
背景颜色：紫色；
茶