univers_ univers_ - 1 month ago 9
CSS Question

transition-delay property not working when changing class

I'm animating an element by changing its parent class (

body
), but when toggling this class it seems to break the
transition-delay
property. It works in Safari but not in Chrome or Firefox.

On clicking the first list element, it should move after the other list elements have disappeared.

When clicking back, the list element should return back to its original position, and afterwards the other list element should reappear. But when clicking the back button, the
transition-delay
on opacity is ignored, causing them to immediately appear.

How can I fix this?



$('#one').click(function() {
$("body").addClass("move");
});

$('#back').click(function() {
$("body").removeClass("move");
});

ul {
width: 300px;
height: 150px;
margin: 0;
padding: 0;
list-style: none;
position: absolute;
bottom: 0;
right: 0;
}
ul li {
height: 50px;
display: block;
margin: 0;
padding: 0;
background: lightgreen;
transition: 500ms transform ease-in-out, 500ms opacity linear;
opacity: 1;
transition-delay: 0, 500ms;
}
body.move ul li#one {
transform: translateY(-100vh) translateY(150px);
transition: 500ms transform ease-in-out;
transition-delay: 500ms;
opacity: 1;
}
body.move ul li {
opacity: 0;
transition: 500ms opacity linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="one">One</li>
<li id="two">Two</li>
<li id="three">Three</li>
</ul>
<a id="back">Back</a>





https://jsfiddle.net/m3e7sm8k/5/

Answer

Instead of this:

transition-delay: 0, 500ms;

Use this:

transition-delay: 0s, 500ms;

0, as a unitless time value, doesn't work in some browsers, apparently. The transition-delay definition in the spec doesn't explicitly prohibit a unitless value, but it does appear to be implied by the consistent use of 0s. In any case, I would avoid unitless time values to be safe.

Spec reference: 2.4. The transition-delay Property

Comments