我已经使用这个代码用于移动特定元素，并积累了valueCSS属性（如：中left）与transition: cubic-bezier在同一时间。我在 2 到 3 天前检查过这段代码有效，但今天突然，由于transition未知原因，它不再起作用了。
这是代码：
'use strict';
class Assemble {
constructor(elem, acc, name, unit) {
this.elem = document.querySelector(elem);
this.acc = acc;
this.name= name;
this.unit = unit;
}
calc() {
let displayOn = this.elem.style.display;
this.elem.style.display = 'none';
let currentProp = window.getComputedStyle(this.elem, null).getPropertyValue(this.name),
S2N = parseInt(currentProp, 10);
this.elem.style.display = displayOn;
this.stock(S2N);
}
stock(value) {
let digit = (value * 1) + this.acc;
this.elem.style.left = digit + this.unit;
console.log(this.elem.style.left);
}
}
let proAssemble = new Assemble('.button', 10, 'left', '%');
setInterval(() => {
proAssemble.calc();
}, 1500)* {
margin: 0;
padding: 0;
}
.button {
position: absolute;
width: 200px;
left: 10%;
background-color: purple;
transition: left 1000ms;
}<div class="button">
test
</div>算法很简单：
关闭element's display以获取其当前的 CSS 属性。（必要的）
将长度单位 ( %) 与 CSS 属性值分离。
打开element's display.
将数字添加this.acc到 CSS 属性值。
将其分配给element.
以防万一，我已经检查了CSS和Javascript的最新补丁说明，但我不知道哪个导致不起作用。
任何提示都可以很好地解决此问题。
谢谢。
这可能是由于内部优化。发生的事情是浏览器正在批量更改样式并将它们添加到一起，即使您单独添加它们也是如此。这意味着left没有被转换。如果您尝试将任何属性与display: none其他属性一起转换，也会发生同样的情况。
如果浏览器之前没有做这个优化，他们现在正在做，这就是你的代码被破坏的原因。
有一个简单的解决方案，这一点，这是运行stock在一个回调的setTimeout，像这样：setTimeout(() => this.stock(S2N), 0);。这通过在稍后时间安排更改来选择退出优化（即使它是 0 毫秒，它仍然被添加到队列中并且不会立即执行，因此选择退出）。您可以在下面的代码段中看到这一点。这是最简单的修复。
另一种可能的解决方案是自己计算百分比，而不是设置display: none来获取百分比值。据我了解，这种行为没有明确定义，将来可能会发生变化。您可以改为计算左值的百分比，如下所示：
Math.floor(window.innerWidth / parseInt(currentProp, 10))
您可以在Assemble对象的实例化期间执行此操作，也可以在类中创建某种逻辑来检测是否unit 为百分比。
最后一句警告：转换left效率相当低。尝试转换transform: translateX(value)属性。渲染性能要好得多。
'use strict';
class Assemble {
constructor(elem, acc, name, unit) {
this.elem = document.querySelector(elem);
this.acc = acc;
this.name= name;
this.unit = unit;
}
calc() {
let displayOn = this.elem.style.display;
this.elem.style.display = 'none';
let currentProp = window.getComputedStyle(this.elem, null).getPropertyValue(this.name),
S2N = parseInt(currentProp, 10);
this.elem.style.display = displayOn;
if (S2N < 100) {
setTimeout(() => this.stock(S2N), 0);
}
}
stock(value) {
let digit = (value * 1) + this.acc;
this.elem.style.left = digit + this.unit;
this.elem.addEventListener('transitionend', this.calc.bind(this), {once: true})
console.log(this.elem.style.left);
}
}
let proAssemble = new Assemble('.button', 10, 'left', '%');
proAssemble.calc();* {
margin: 0;
padding: 0;
}
.button {
position: absolute;
width: 200px;
left: 0;
background-color: purple;
transition: left 1000ms;
}<div class="button">
test
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句