[csswg-drafts] [css-transitions] Returning event info or targets for transition events (#5862)

m6o has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-transitions] Returning event info or targets for transition events ==
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 
}
````


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5862 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 12 January 2021 18:25:27 UTC