Afisare cu animatie continut adaugat cu JavaScript

[Marius]

Ideea pe care vreau sa o fac e că la clic pe un buton, conținutul vechi e înlocuit cu nou conținut HTML adăugat cu javascript.
Vreau ca noul conținut să apară cu animație; 'fade' din dreapta (o transition CSS) de fiecare dată când fac clic pe buton.

Iată un fragment din ceea ce am în minte, dar nu știu cum să fac adaugarea cu animație (transition):

Cod: Selectaţi tot

<style>
#pag_cnt p {
  font-size: 40px;
}
</style>

<div id='pag_cnt'>
  <p>Hello world!</p>
</div>
<button onclick='add_anim()'>Click here</button>

<script>
let new_cnt = `<p>It's me again!</p>`;

function add_anim() {
  let pag_cnt = document.getElementById('pag_cnt');
  pag_cnt.innerHTML = new_cnt;
}
</script>

Pentru a declanșa o tranziție CSS, modifica starea CSS după ce ai introdus codul HTML. Poți face asta schimbând o clasă (la container sau la un element inserat).
Apoi definesti o animație CSS și-o redai ori de câte ori faci clic pe buton.

Studiaza și testeaza următorul cod:

Cod: Selectaţi tot

<style>
#pag_cnt p {
  font-size: 40px;
}

.add_anim {
  animation: fadeIn 500ms ease-out backwards;
}

@keyframes fadeIn {
  from {
    transform: translateX(280px);
    opacity: 0;
  }
  to {
    transform: translateX(0px);
    opacity: 1;
  }
}
</style>

<div id='pag_cnt'>
  <p>Hello world!</p>
</div>
<button onclick='add_anim()'>Click here</button>

<script>
let new_cnt = `<p>It's me again!</p>`;
let pag_cnt = document.getElementById('pag_cnt');

function add_anim() {
  pag_cnt.innerHTML = new_cnt;
  
  pag_cnt.classList.add('add_anim');
  
  setTimeout(function() {
    pag_cnt.classList.remove('add_anim');
  }, 500); // 500 is the same time as the CSS animation
}
</script>

- Demo:

Hello world!