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

Question

当我在css中更改bg的左侧位置时，会出现一个过渡。但是当我在javascript中更改位置时，没有过渡。

要遵循的步骤以查看我在说什么

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

2.将BG的位置改回1366px。

3. 现在取消注释 JS 代码。 它将改变BG位置，但没有过渡

这是我认为您无法更改堆栈溢出上的代码

的代码

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 样式中使用了动画属性，因此为了使用 Javascript 进行动画处理，您还需要在 JavaScript 中定义自定义动画函数。

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