trigger CSS animation with JavaScript function

Question

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" class="card">
    <div id="mail-header" class="card-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" class="card-body">
      <h5 style="font-weight:bold;" id="mail-subject" class="card-title"></h5>
      <p id="mail-time" class="card-text"></p>
      <a id="mail-button-reply" href="#" class="btn btn-primary">reply</a>
      <a id="mail-button-archive" href="#" class="btn btn-secondary">Archive</a>
    </div>
    <div id="card-body-2" class="card-body">
        <p style="font-size: 20px;" id="mail-content" class="card-text"></p>
    </div>

  </div>

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

Does it retrigger if you remove and re-add the id? If so you could move the animation to a new class and set up some JS which does this for you when you need to the have the animation happen. Something like: document.getElementById("myelement").classList.remove("mystyle"); and document.getElementById("myelement").classList.add("mystyle"); — Daniel Black
– Daniel Black, Commented Dec 21, 2022 at 17:11
I just try it but the animation keep starting on reload. I think the problem is that the animation iteration is by default 1 and i'm displaying the same page with different content . So the animation runs only one time (on page loaded) in my case. — Augustin
– Augustin, Commented Dec 21, 2022 at 17:29
What does your HTML look like? Also, I'm not seeing anything that would re-trigger the animation each click. The load_mailbox function sets the display of #email-view to block, but nothing's setting it to none or anything else. So why do you expect the animation to re-trigger? — LawrenceWebDev
– LawrenceWebDev, Commented Dec 21, 2022 at 17:33
I expect the animation to re-trigger every time i update the content of the #email-view by passing a different mailbox to the load_mailbox — Augustin
– Augustin, Commented Dec 21, 2022 at 17:38

Mouradif · Accepted Answer · 2022-12-22 10:36:41Z

2

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');
}

answered Dec 22, 2022 at 10:36

Mouradif

2,7342 gold badges26 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Augustin · Accepted Answer · 2022-12-22 10:24:21Z

1

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')
}

answered Dec 22, 2022 at 10:24

Augustin

1351 silver badge8 bronze badges

1 Comment

Mouradif Over a year ago

That's also a good solution, especially for simple animations. I actually wasn't aware of the element.animate() function, I thought that was jQuery for a second. Thanks for sharing

Collectives™ on Stack Overflow

trigger CSS animation with JavaScript function

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related