gpt4 book ai didi

jquery - 转换延迟属性在更改类时不起作用

转载 作者:行者123 更新时间:2023-11-27 23:22:45 25 4
gpt4 key购买 nike

<分区>

我正在通过更改其父类 (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>

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com