Javascript: addEventListener for transitionend does not execute function

Question

I have the following code which is supposed to make a banner fade into view, which it does. However, there are additional effects I want to trigger once the transition has completed, but I cannot get the transitionend event to trigger a call to a function.

  modalBanner.classList.remove("fade-in", "fade-out");
  modalBanner.classList.add("hidden");
  modalBanner.innerHTML = bannerText;
  if (bannerText != "") {
    console.log("adding transition");
    modalBanner.classList.add("fade-in");
    var qs = document.querySelector('.fade-in');
    console.log(qs);
    qs.addEventListener("transitionend", () => { console.log('Transition ended'); });   
    modalBanner.classList.remove("hidden");
    console.log("transition added");
  }

I am executing this in Chrome v93, which this site says supports transitionend. My console log shows:

adding transition                          GameTracker.html:288
 <div class="modalBanner fade-in">…</div>  GameTracker.html:291
transition added                           GameTracker.html:294
>

As you can see, the fade-in class does get added, and the fade-in does work. But I never get the Transition ended message. Any ideas as to where I am going wrong?

The call to `.querySelector()` will return only the **first** element in the DOM that has the given class. — Pointy, Sep 19 '21 at 13:07
please add a [**Minimal, Reproducible Example**](https://stackoverflow.com/help/minimal-reproducible-example) — Mister Jojo, Sep 19 '21 at 13:15
@Pointy good point. But in this case it is returning the correct element. I have verified that by showing the value for qs, which is showing the correct modalBanner div element. — Clive Pottinger, Sep 19 '21 at 13:17
Please trim your code to make it easier to find your problem. Follow these guidelines to create a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example). — Community, Sep 26 '21 at 14:39

score 0 · Answer 1 · edited Sep 16 '22 at 18:21

0

Good Greif! I found the problem. I was posting a comment to include my css for the fade-in effect and noticed that the css is using animation, not transition. I had forgotten that I had changed the css some time ago.

I switched the javascript to use addEventListener("animationend"... and it worked.

edited Sep 16 '22 at 18:21

Mister Jojo

20,093
6
21
40

answered Sep 19 '21 at 13:24

Clive Pottinger

19
4

Javascript: addEventListener for transitionend does not execute function

1 Answers1