- From: Kagami Sascha Rosylight via GitHub <sysbot+gh@w3.org>
- Date: Sat, 16 Sep 2017 11:26:29 +0000
- To: public-css-archive@w3.org
SaschaNaz has just created a new issue for https://github.com/w3c/csswg-drafts:
== [css-transitions] What should happen on `transitionend` when transition ended but the listener is not called yet? ==
Currently Firefox implementation and Chrome/Edge one for `transitionend` has slight difference.
See [this sample](https://codepen.io/SaschaNaz/pen/WZQbmm):
```css
h2 {
transition-duration: 4s;
}
```
```js
/** Resolves when event fires on target element */
function tillEvent(element, eventName) {
return new Promise(resolve => {
element.addEventListener(eventName, ev => resolve(ev), { once: true });
})
}
const track = [
[400, 200, 0.5],
[300, 300, 0],
[200, 400, 0.5],
[0, 0, 1]
];
button.addEventListener("click", async () => {
for (const [x, y, opacity] of track) {
text.style.marginLeft = `${x}px`;
text.style.marginTop = `${y}px`;
text.style.opacity = '' + opacity;
await tillEvent(text, "transitionend");
}
});
```
This sample:
1. applies three properties including marginLeft, marginTop, and opacity,
2. then waits until the `transitionend` event occurs,
3. and then applies next property set (that includes marginLeft, marginTop, opacity).
The intended behavior is that each property set is applied after each `transitionend` event.
Firefox runs this sample as intended; it applies the properties and waits `transitionend` on each loop. The element goes 400,200->300,300->200,400->0,0 where each movement takes 4 seconds.
Chrome and Edge does differently: The element goes 400,200->immediately 0,0. I think the event listeners on the second/third loop are immediately fired as the browser still have other two `transitionend` on their event queue after the first loop.
What is the expected behavior here?
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1820 using your GitHub account
Received on Saturday, 16 September 2017 11:26:23 UTC