加载新元素时对元素进行动画处理

Question

我认为我无法用语言很好地解释这一点，所以这是一个gif：

p是一个<p>标记，当其显示更改为在js中阻止时会显示（默认情况下，没有标记）。

发生这种情况时，h1会稍微向上移动。 （这里只有一行，通常更多）

我该如何使h1的向上运动动画？

Answer 1

您可以利用display: table利用display: table-cell和vertical-align: bottom属性来模拟重力到底部。

然后，通过一点点jQuery的好处，您应该能够在特定事件（例如加载新元素）上触发CSS动画。

在JSFiddle上查看此implementation

Answer 2

在代码段中，hObj是要移动的h1标签，而pObj是要稍后插入的段落标签。您可以使用CSS过渡为对象设置动画。

var hObj = document.getElementById("hObj");
var pObj = document.getElementById("pObj");

function move(){
  hObj.style.top = "60px";
  hObj.addEventListener("transitionend", function(){ pObj.style.visibility = "visible"; });
}

<h1 style="position:absolute; left:100px; top:100px; transition:top 0.5s linear; cursor:pointer; " id="hObj" onclick="move()">h1</h1>
<p style="position:absolute; left:100px; top:100px; visibility:hidden" id="pObj">p</p>