我正在通过更改元素的父类（body）为元素设置动画，但是在切换此类时，似乎会破坏transition-delay属性。它可以在Safari中使用，但不能在Chrome或Firefox中使用。
单击第一个列表元素时，其他列表元素消失后，它应该移动。
单击时，列表元素应返回到其原始位置，此后，另一个列表元素应重新出现。但是，当单击“后退”按钮时，transition-delay打开的不透明度将被忽略，从而使它们立即显示。
我怎样才能解决这个问题？
$('#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>代替这个：
transition-delay: 0, 500ms;
用这个：
transition-delay: 0s, 500ms;
0，作为无时间单位的时间值，显然在某些浏览器中不起作用。transition-delay规范中的定义并未明确禁止无单位的值，但始终使用似乎暗含了它0s。无论如何，为了安全起见，我会避免使用无单位的时间值。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句