클래스를 변경할 때 전환 지연 속성이 작동하지 않습니다.

Question

부모 클래스 (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/

Answer 1

:

transition-delay: 0, 500ms; 

사용이 :

transition-delay: 0s, 500ms; 

0은 단위가없는 시간 값으로 일부 브라우저에서는 작동하지 않습니다. 스펙의 transition-delay 정의는 단위가없는 값을 명시 적으로 금지하지 않지만, 일관성있는 사용 인 0s에 의해 암시 된 것처럼 보입니다. 어쨌든, 나는 단위 시간 값이 안전하지 않게 피할 것입니다.

사양 참조 : 2.4. The transition-delay Property