CSS delayed visibility transition doesn't trigger JavaScript transitionend event for visibility-CodePudding

I'm using the technique for delaying visibility transition, combined with opacity. This is working nice:

<body>
  <button>run</button>
  <div ></div>
</body>

.box {
  visibility: hidden;
  opacity: 0;
  /* property name | duration | easing function | delay */
  transition: visibility 0s ease-in-out 3s,
              opacity 3s ease-in-out;
}

.box.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

The problem happens when I listen to the transitionend event. This should log both visibility and opacity properties, but instead only the opacity is logged (pen here):

const button = document.querySelector('button');
const box = document.querySelector('.box');

// When class "show" is added, only "opacity" is logged
// When class "show" is removed, both "opacity" and "visibility" are logged
box.addEventListener('transitionend', e => {
  console.log(e.propertyName);
});

button.addEventListener('click', () => {
  box.classList.toggle('show');
});

Why I need to listen to transitioned? with this event I'am checking the number of transition properties (totalProperties); when all properties are transitioned (tracking with a counter), I know that element actually finished all its transitions:

const totalProperties = window.getComputedStyle(element)['transition-property'].split(',').length;
let counter = 0;

const callback = e => {
  e.stopPropagation();

  if (  counter === totalProperties) {
    counter = 0;
    box.removeEventListener('transitionend', callback);

    console.log('All properties transitioned.');
  }
};

box.addEventListener('transitionend', callback);

CodePudding user response：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event:

If there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired.

transition: visibility 0s ease-in-out 3s

Your transition-duration for visibility is 0s here.

Make that .0001s, and you'll see the transitionend event for visibility fire as well.