在javascript中更改元素的位置时没有过渡

Question

当我更改CSS中bg的位置时，会有一个过渡。 但是，当我更改javascript中的位置时，没有过渡。

遵循步骤查看即时消息

1. 在CSS中，将左bg从1366px更改为0。您将看到一个过渡。

2.将背景色的位置更改回1366px。

3. 现在取消注释js代码。 它将改变背景的位置，但没有过渡

这是codepen，我不认为你可以在stackoverflow上更改代码

https://codepen.io/anon/pen/oGKMpm

 var bg = document.getElementsByClassName('bg'); // uncomment the code below. there is no transition // bg[0].style.left ='0'; 

 * { padding: 0; margin: 0; } html, body, .bg { height: 100%; width: 100%; } .bg { position: absolute; background: blue; transition: all 0.5s linear; /* change this to 0px. there will be a transition. change it back to 1366px. and then uncomment the javascript code */ left: 1366px; } 

 <div class="bg"></div> 

Answer 1

这是因为您已经在CSS样式中使用了animation属性，因此要使用Java动画制作动画，还需要在JavaScript中定义自定义动画功能。

(function(){
    var bg = document.getElementsByClassName('bg');
    var pos = 1366;
    setInterval(function(){ bg[0].style.left = --pos;}, 10);
})();