property elapsedTime from transitionend event should not include delay
Reported by
f.o.th...@gmail.com,
Oct 24 2016
|
||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36
Steps to reproduce the problem:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Transition Test</title>
<style type="text/css">
.test {
background: #FFF;
height: 100px;
}
.test-appear {
background: #F00;
transition: all 2s 1s;
}
</style>
</head>
<body>
<div id="div" class="test"></div>
<button id="bt">Transition</button>
<script>
var div = document.getElementById('div');
div.addEventListener('transitionend', function(e) {
console.log(e.elapsedTime);
});
var bt = document.getElementById('bt');
bt.addEventListener('click', function(e) {
div.className += ' test-appear';
});
</script>
</body>
</html>
What is the expected behavior?
I don't know if a should report issues related to specs that are not yet complete, so let me know if I shouldn't.
According to the specs
https://drafts.csswg.org/css-transitions/#transition-events
the elapsedTime property from the transitionend event should not include any time related to the delay specified in the transition.
What went wrong?
The value of the delay is being added to the elapsed time.
Did this work before? N/A
Chrome version: 53.0.2785.143 Channel: n/a
OS Version: OS X 10.12.0
Flash Version: Shockwave Flash 23.0 r0
,
Oct 24 2016
,
Oct 25 2016
Confirmed this is an issue. Clicky version of the repro case (open the dev tools console for best results): https://jsfiddle.net/xcd4gn03. Observe that 3 is printed, which is the duration (2s) + the delay (1s), according to syntax transition: <propertyName> <duration> <delay>. We'd expect 2 to be printed. https://developer.mozilla.org/en-US/docs/Web/CSS/transition cc-ing. Suzy for animations.
,
Oct 25 2016
This is an artefact of a change to transitions for the DevTools animations timeline. All transitions from A to B are converted into a 3 keyframe animation: A ---delay--- A ---duration--- B The resulting duration of the transition becomes the sum of the delay and the duration. To fix this we should perform a reverse computation in CSSAnimations::TransitionEventDelegate::onEventCondition() to get the originally specified duration. Note: The refactor work to make transitions use InterpolationTypes in issue 442163 would also fix this bug.
,
Oct 25 2016
The behaviour is correct on Firefox nightly, FWIW.
,
Jan 4 2017
,
May 23 2017
The refactor we used to move CSS Transitions away from AnimatableValues ended up not fixing this issue. Unblocking bug on irrelevant work.
,
Jun 13 2017
,
Jun 13 2018
This issue has been Available for over a year. If it's no longer important or seems unlikely to be fixed, please consider closing it out. If it is important, please re-triage the issue. Sorry for the inconvenience if the bug really should have been left as Available. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 14 2018
|
||||||||||
►
Sign in to add a comment |
||||||||||
Comment 1 by e...@chromium.org
, Oct 24 2016