I have a scenario where I am using jQuery to add and remove a class from the parent element (body). However, I noticed that the transition-delay property seems to be behaving differently in different browsers. It works fine in Safari but breaks in Chrome and Firefox.
Specifically, when I click on the first list item, it should move only after the other list items have disappeared.
However, when I click the back button, the list item should return to its original position, and then the other list items should reappear. The issue is that upon clicking back, the transition-delay on opacity is not respected, causing the items to immediately appear instead of fading in.
I am looking for a solution or workaround to fix this problem. Any suggestions would be greatly appreciated!
$('#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>