在改变Edge中的元素类后，过渡不是动画

问题描述：

我有一个定义了transition属性的元素。我通过切换课程在两个州之间进行动画制作。在改变Edge中的元素类后，过渡不是动画

但是，在边缘（40.15063.674.0，EdgeHTML 15.15063）中，如果上一个转换尚未完成，则转换不会生成动画（而是立即改变状态）。

这是最小的片段。请注意，广场不应该不连续跳跃。

const div = document.getElementById("div"); 
 
setInterval(() => { 
 
    div.classList.add("translate"); 
 
    setTimeout(() => { 
 
     div.classList.remove("translate"); 
 
    }, 500); 
 
}, 2000);

#div { 
 
    transition: 1000ms; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: red; 
 
} 
 

 
.translate { 
 
    transform: translate(200px, 0); 
 
}

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <title>Example</title> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    </head> 
 
    <body> 
 
     <div id="div">Test</div> 
 
    </body> 
 
</html>

我怎样才能解决这个bug？

我试图设置transition-property为建议here，但它没有帮助。

答

下面的代码工作正常。在删除translate类之后，我在#div中添加了translate（0，0）以恢复默认位置。同时结合#div和.translate类来覆盖CSS。

const div = document.getElementById("div"); 
 
setInterval(() => { 
 
    div.classList.add("translate"); 
 
    setTimeout(() => { 
 
     div.classList.remove("translate"); 
 
    }, 1000); 
 
}, 2000);

#div { 
 
    transition: 1000ms; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: red; 
 
    transform: translate(0, 0); 
 
} 
 

 
#div.translate { 
 
    transform: translate(200px, 0); 
 
}

<div id="div">Test</div>

在改变Edge中的元素类后，过渡不是动画

相关推荐