1

I want to run a css animation on button click. I have an animation that is run when another animation ends after that I want that animation to be run on a button click. Right now I have the animation running the first when the preceding animation ends.

These are the few things are tried:

  1. I tried removing the class and re-adding it.// didn't work.
  2. I saw somewhere mentioning to set

    void element offSetWdith = 0;/ // didn't work.

  3. I took the element off the DOM and re-added it by setting

    <template if:true={condition}> // didn't work.

Here is the code I have now:

 <div class="cities-section">
     <lightning-card>
    //animation played out on the cities-section element
    </lightning-card>
 </div>
CSS
.cities-section {
    margin-left: 10px;
    opacity: 0;
}
.cities-list-animation {
    animation: citiesLoadAnimation 0.4s forwards 0s ease;
}
@keyframes citiesLoadAnimation {
0% {
    opacity: 0;
}

100% {
    opacity: 1;
}
}

JS
  mapAnimationEnds() {
    this.template.querySelector('.cities-section').classList.add('cities-list-animation');
  }

1 Answer 1

3

Browsers calculate a sort of "delta", as does Lightning, so you just need a small render delay to allow the first set of changes to finish rendering before starting more. The following works for me in this playground:

    this.template.querySelector('.cities-section').classList.remove('cities-list-animation');
    setTimeout(() =>
    this.template.querySelector('.cities-section').classList.add('cities-list-animation'));

This is basically "option 1" from your answer, but keeping in mind that you need to introduce a render cycle to make this work.

1
  • Thanks @sfdcfox, the above is working. also thanks to the Playground linked, that helped.
    – sumchans
    Apr 13, 2020 at 19:17

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .