Question

我在页面中间有一个div 我想在父元素的右上角（无动画）中更改div的位置，然后用动画移动到父元素的左上角。
所以，我第一次使用这段代码：
但这不能正常工作。

＆＃13;

function doAnimation(){
  var child = document.getElementById("child");
  var parent = document.getElementById("parent");
  
  child.style.left = parent.offsetWidth + "px";
  child.classList.add("child-animation");
  child.style.left = 0 + "px";
}

＆＃13;

#parent{
  position: relative;
  width: 500px;
  height: 200px;
  background-color: red;
}

#child{
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 225px;
  background-color: yellow;
}

#button{
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0;
  background-color: grey;
}
  

.child-animation{
    -webkit-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-moz-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-ms-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-o-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	transition: all 700ms cubic-bezier(1,.01,.96,.87);
}

＆＃13;

<div id="parent">
  <div id="child">
  </div>
  <div id="button" onclick="doAnimation();">
  </div>
</div>

＆＃13;

我这样做之后：

这项工作？

＆＃13;

function doAnimation () {
  var child = document.getElementById("child");
  var parent = document.getElementById("parent");
  
  child.style.left = parent.offsetWidth + "px";
  setTimeout( function () {
      child.classList.add("child-animation");
      child.style.left = 0 + "px";
   }, 0);
}

＆＃13;

#parent{
  position: relative;
  width: 500px;
  height: 200px;
  background-color: red;
}

#child{
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0;
  left: 225px;
  background-color: yellow;
}

#button{
  position: absolute;
  width: 100%;
  height: 30px;
  bottom: 0;
  background-color: grey;
}
  

.child-animation{
    -webkit-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-moz-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-ms-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	-o-transition: all 700ms cubic-bezier(1,.01,.96,.87);
	transition: all 700ms cubic-bezier(1,.01,.96,.87);
}

＆＃13;

<div id="parent">
  <div id="child">
  </div>
  <div id="button" onclick="doAnimation();">
  </div>
</div>

＆＃13;

我的问题是，为什么第一个代码不起作用，第二个代码用setTimeout（函数，0）工作？

请帮帮我！

Answer 1

需要强制重绘

您需要阅读一个让浏览器重新计算元素的属性。像这样：

child.style.left = parent.offsetWidth + "px";
var forced=child.scrollLeft; // Forces a redraw
child.classList.add("child-animation");
child.style.left = 0 + "px";

这是由于浏览器如何对属性进行更改并在下一次重绘事件期间一次性运行它们。在第一种情况下：

child.style.left = parent.offsetWidth + "px";
child.classList.add("child-animation");
child.style.left = 0 + "px";

所有基本上都在同一时间运行，这意味着浏览器的行为就像它实际上只收到了这样：

child.classList.add("child-animation");
child.style.left = 0 + "px";

并非所有浏览器都批量（分组）这样的属性，这就是它因浏览器而异的原因。

Javascript更改div的位置并应用动画后

1 个答案:

需要强制重绘