[css-transitions] Returning event info or targets for transition events

[m6o]

Currently, transition events do not return any event info (https://drafts.csswg.org/css-transitions/#transitionend).

In some cases it may be desirable to have a single event-listener on a container element, handling events from multiple children. If you would apply this pattern to transition-events, there is no event info to tell them apart.

Simplified example

<div id="container">
    <div>Hover over me!</div>
    <div>Hover over me!</div>
</div>

#container div {
    background-color: red;
    transition: background-color 1s;
}
#container div:hover {
     background-color: blue;
}
.green {
     background-color: green;
}

container.children.forEach(element => element.addEventListener('transitionend', () => {
    console.log(element);
}));

// versus

container.addEventListener('transitionend', (event) => {
    console.log(event.target); 
});

Or if just the target would be returned...

container.addEventListener('transitionend', (target) => {
    console.log(target);
});

Examples of event info

Result from a transition triggered by hovering over a div or leaving:

TransitionEvent {
    isTrusted: true, 
    target: div, 
    trigger: "selected" | "deselected", 
    selector: "#container div:hover", 
    elementStyle: null 
}

Results from a transition triggered by a script:

container.children[0].style.backgroundColor = "green";

TransitionEvent {
    isTrusted: false, 
    target: div, 
    trigger: "value change", 
    selector: null, 
    elementStyle: "background-color" 
}

container.children[0].className = "green";

TransitionEvent {
    isTrusted: false, 
    target: div, 
    trigger: "value change", 
    selector: ".green", 
    elementStyle: null 
}

[birtles]

I'm sorry, but unfortunately I don't quite understand the request so please excuse me if my answer below is not helpful.

TransitionEvent inherits from Event so you can detect which child fired the event (example codepen).

Regarding elementStyle, I believe transitionProperty gives you this information?

As for referencing the selector that triggered the transition, unfortunately that is complicated since many selectors and inline styles may contribute to the set of computed transition properties that define the transition.

[m6o]

Thanks, you're answer helped me.

Looks like I ran into a bug and then somehow completely missed exactly the part I was looking for when reading the draft - I'll blame it on the night.

My reasoning behind the selector was that, although many selectors and inline styles determine properties, there is only one selector or inline style (or element.style from javascript's perspective) which was the last to affect a property before the transition-start event for that property fires... But already having both the propertyName and the pseudoElement should cover most use cases by far.

I'll be closing this because there is no issue with the draft.