클래스를 변경하여 애니메이션 슬라이드 다운

Question

간단한 토스트 시스템을 만들었습니다. 나는 비 볼 (bottom: -50px; position: fixed;) 블록이 있습니다

<div class="toast" ng-class="$root.peekToast.class" ng-bind="$root.peekToast.msg"></div> 

그럼 내가 추가를 toast-show 토스트가 필요한 경우 ng-class를 사용하여 클래스 (애니메이션) :

그러나

.ew-toast-show { 
    -webkit-animation: ew-toast-show 0.5s forwards; 
    -webkit-animation-delay: 0.5s; 
    animation: ew-toast-show 0.5s forwards; 
    animation-delay: 500ms; 
} 

@-webkit-keyframes ew-toast-show { 
    100% { bottom: 20px; } 
} 

@keyframes ew-toast-show { 
    100% { bottom: 20px; } 
} 

, 토스트가 될 준비가되어 있습니다 나는 toast-show 클래스를 대체 할 때 toast-hide이라는 축배를 갖고 싶습니다.

나는 대신 -50px을 사용하여 show 애니메이션 논리를 복제하려고 시도했습니다. 그것은 효과가 없었습니다. 그것은 그것을 숨기고 그것을 아래로 미끄러 뜨리기 전에 보여주었습니다.

올바른 방법은 무엇입니까?

Answer 1

코드를 약간 변경하고 지원할 수 있다면 transform 및 transition을 사용하는 것이 @keyframes보다 쉬울 것이라고 생각합니다.

$('#b').click(() => $('.toast').toggleClass('ew-toast-show'));

.toast { 
 
    position: fixed; 
 
    bottom: -50px; 
 
    transition: transform 0.5s; 
 
} 
 

 
.ew-toast-show { 
 
    transform: translateY(-70px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toast">Toast</div> 
 
<button id="b">Toggle</button>

나는 편의를 위해 jQuery를 추가했다. 열쇠는 .toast에 transition으로 설정됩니다. 이 예에서는 transform 속성에 애니메이션을 적용하고 0.5 초 동안 지속하려고합니다. 그런 다음 축배를 보여줄 때의 클래스는 transform을 사용하여 최종 위치를 나타냅니다. CSS가 애니메이션을 처리합니다.