CODEWITHSUNDEEP
htmlcsscss-animations
weakit
weakit

Reputation: 216

Animate element when new element is loaded

I don't think I can explain this very well in words, so here's a gif:

The p is a <p> tag that appears when it's display is changed to block in js (by default it's none).

When this happens, h1 shifts a bit upward. (here it's only one line, it's usually more)

How can I go about animating h1's movement upward?

Upvotes: 2

Views: 256

Answers (2)

Animan
Animan

Reputation: 312

In the snippet, hObj is the h1 tag you wish to move and pObj is the paragraph tag you want to insert later. You can use css transitions to animate objects.

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>

Upvotes: 0

mrcendre
mrcendre

Reputation: 1092

You can harness display: table and display: table-cell properties to emulate a gravity to the bottom using vertical-align: bottom.

Then with a little bit of jQuery goodness, you should be able to trigger CSS animations on specific events, such as the loading of a new element.

Check out this implementation on JSFiddle

Upvotes: 2

Related Questions