Geek Answers Handbook

Is it possible to animate a change to innerHTML only with CSS?

My pure-JS script changes the text inside the <p> element, just using innerHTML . Is it possible to animate this change only with CSS, without using jQuery? If so, how?

Thanks!

+5
source share
1 answer

Before setting innerHTML, add some class to the container that sets the state of the preliminary animation via CSS, then set innerHTML and delete this class. if the container has a transition, it must be animated to clear the state.

  .container { transition: all 1s; max-height: 300px; } .container.pre-animation { opacity:0; max-height: 0; }

setTimeout to make sure the effect is more noticeable

 var innerHTMLString = '<h1> I am H1 </h1>'; var container = document.querySelector('.container') container.classList.add('pre-animation'); container.innerHTML = innerHTMLString +'ravi'; setTimeout(function(){ container.classList.remove('pre-animation') },100)
+2
source

More articles:


All Articles