在javascript

Question

当我改变css中bg的左侧位置时，会发生转换。但是当我在javascript中更改位置时，没有转换。

要了解我正在谈论的内容

的步骤

css中的
1. 将从1366px左侧的bg更改为0.您将看到过渡。

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

1. 现在取消注释js代码。它将改变bg位置，但没有过渡

这里是codepen我不认为你可以改变stackoverflow上的代码

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

＆＃13;
＆＃13;
var bg = document.getElementsByClassName('bg');


// uncomment the code below. there is no transition

// bg[0].style.left ='0';
＆＃13;
* {
  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;
}
＆＃13;
<div class="bg"></div>
＆＃13;
＆＃13;
＆＃13;

Answer 1

因为您在css样式中使用了动画属性，所以为了使用Javascript进行动画制作，您还需要在JavaScript中定义自定义动画功能。

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