transition switch to initial value is failed #35833
Description
Describe the bug:
Transition toggle from one value to initial value, animation doesn't reset properly.
To Reproduce:
- Set transition and transform to a CSS animation
- Set transition and transform with an iniial value to reset
expected: box will reset after step2
actual: box stays in place after step1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="first">first step</button>
<button id="resetinitial">reset with initial</button>
<button id="resetanimation">reset with animation</button>
<div id="target" style="width: 100px; height: 100px; background-color: aqua;"></div>
<script>
var target = document.getElementById("target");
first.onclick = function() {
target.style.transform = "translateY(100px)";
target.style.transition = "transform .3s ease-out";
}
resetinitial.onclick = function() {
target.style.transition = "transform .0s ease";
target.style.transform = "translateY(0)";
}
resetanimation.onclick = function() {
target.style.transform = "translateY(0)";
target.style.transition = "transform .3s ease-out";
}
</script>
</body>
</html>Platform:
Ubuntu