代码之家 › 专栏 › 技术社区 › weakit

加载新元素时设置元素的动画

css-animations css3 html5 css html

2

weakit · 技术社区 · 6 年前

我想我无法用语言很好地解释这一点,所以这里有一个gif:

这个 p <p> 在js中将其显示更改为block时出现的标记(默认情况下为none)。

当这种情况发生时, h1

我该如何设置h1向上移动的动画?

2 回复 | 直到 6 年前

1

2

mrcendre 6 年前

你可以利用 display: table display: table-cell 属性以使用 vertical-align: bottom

然后再加上一点jQuery的优点,您应该能够在特定事件上触发CSS动画,比如加载新元素。

看看这个 implementation 关于JSFiddle

2

0

Animan 6 年前

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>