2
親クラス（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/