I update the content of a div with a JavaScript function and i want to trigger animation on the div each time a new mailbox is loaded.

But the animation get triggered once on reload or when i'm switched back from another div . Notice that i'm switching beetween divsby tweaking the displayattribute of each div.

document.addEventListener('DOMContentLoaded', function() {

  // Use buttons to toggle between views
  document.querySelector('#inbox').addEventListener('click', () => load_mailbox('inbox'));
  document.querySelector('#sent').addEventListener('click', () => load_mailbox('sent'));
  document.querySelector('#archived').addEventListener('click', () => load_mailbox('archive'));

  // By default, load the inbox
  load_mailbox('inbox');
}



function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';

  // Show the mailbox name
  document.querySelector('#emails-view').innerHTML = `<h3>${mailbox.charAt(0).toUpperCase()   mailbox.slice(1)} </h3>`;

}

I wrote the animation and link the div to it expecting the animation will load on each function call but instead of that the animation loads on reach refresh of the page.

#emails-view {
    position: relative;
    background-color: transparent;
    text-align: center;
    font-size: 20px;
    background-color:white;
    width: 100%;
    padding-bottom: 10px;
    border-radius: 15px;
}


@keyframes grow {
    0% { top: 0%;
        }
    30% {top: 50%;
    }
    100% {top: 0%;
    }
}

#emails-view {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
} 

The HTML is that :

<hr>

<div id="emails-view">
</div>

<div id="mail-view" >
    <div id="mail-header" >
        <div style="font-weight:bold;" id='mail-sender'></div>
        <div style="font-weight:bold;" id='mail-receiver'></div>
    </div>
    <div id="card-body-1" >
      <h5 style="font-weight:bold;" id="mail-subject" ></h5>
      <p id="mail-time" ></p>
      <a id="mail-button-reply" href="#" >reply</a>
      <a id="mail-button-archive" href="#" >Archive</a>
    </div>
    <div id="card-body-2" >
        <p style="font-size: 20px;" id="mail-content" ></p>
    </div>

  </div>

<div id="compose-view">
    <h3>New Email</h3>
    <form id="compose-form">
        <div >
            From: <input disabled  value="{{ request.user.email }}">
        </div>
        <div >
            To: <input id="compose-recipients" >
        </div>
        <div >
            <input style="font: bold; font-size: 30px;"  id="compose-subject" placeholder="Subject">
        </div>
        <textarea style="font-size: 20px;"  id="compose-body" placeholder="Body"></textarea>
        <input style="color: white;" id='compose-submit' type="submit"  value="Send Mail"/>
    </form>
</div>

CodePudding user response：

I finally find a fix animating the div directly from JavaScript animate method.

I wrote a function to find and apply the animation

function animate(view){
  element = document.querySelector('${view}').animate([
    // keyframes
    {opacity: '0'},
    {opacity : '1'}
  ],
  // timing options
  {
    duration:1000,

  })}

and i'm trigerring the function each time i load a mailbox

function load_mailbox(mailbox) {
  
  // Show the mailbox and hide other views
  document.querySelector('#emails-view').style.display = 'block';
  document.querySelector('#mail-view').style.display = 'none';
  document.querySelector('#compose-view').style.display = 'none';

  // animate current view
  animate('#emails-view')
}

CodePudding user response：

The way I trigger CSS animations with JavaScript is to attach the animation to a class:

.animate {
    animation-name: grow;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

Then add the class to the selected element with JS while removing from others

document.querySelector('#emails-view').classList.add('animate');

Then you may want to remove the class when the animation is over

// notice we use `function` and not `() => {}`, it's more convenient
// in this case because it gives access to `this.classList`
document.querySelector('#emails-view').onanimationend = function() {
  this.classList.remove('animate');
}