CSS 애니메이션을 사용하여 요소를 화면 밖으로 이동 한 다음 뒤로 이동

다음 예제에서 부드러운 slideIn/Out 애니메이션으로 요소 위치를 제어하는 것이 목표입니다.

문제는 새 클래스가 추가되어 처음 요소를 덮어 쓰고 애니메이션의 두 번째 부분이 요소 위치를 0으로 재설정 한 다음 다시 슬라이드 인으로 다시 시작하는 것입니다.

다음 스 니펫은 내가 설명하려고했던 것을 더 잘 보여줍니다.CSS 애니메이션을 사용하여 요소를 화면 밖으로 이동 한 다음 뒤로 이동

$('.trigger').click(function() { 
 

 
    if (!$('.target').hasClass('hide')) { 
 
    \t $('.target').addClass('hide') 
 
    } else { 
 
    $('.target').addClass('show') 
 
    } 
 
    
 
})

.target { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
} 
 

 
.trigger { 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
@keyframes hide{ 
 
    0% { transform: translate(0);} 
 
    20% { transform: translate(5px);} 
 
    100% { transform: translate(-120vw);} 
 
} 
 

 
@keyframes show { 
 
    0% { transform: translate(-120vw);} 
 
    80% { transform: translate(-5px);} 
 
    100% { transform: translate(0);} 
 
} 
 

 
.hide { 
 
    animation: hide 0.5s forwards ease-in-out; 
 
    animation-delay: .2s; 
 
} 
 

 
.show { 
 
    animation: show 0.5s forwards ease-in-out; 
 
    animation-delay: .2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='target'>&nbsp;</div> 
 
<button class='trigger'>Trigger</button>

출처

2016-10-20 volna

당신은 애니메이션 지연을 제거 할 경우

$('.trigger').click(function() { 
 
    var target = $('.target'); 
 
    if (!target.hasClass('hide')) { 
 
    target.removeClass('show'); 
 
    \t target.addClass('hide'); 
 
    } else { 
 
    target.removeClass('hide'); 
 
    target.addClass('show'); 
 
    } 
 
    
 
})

.target { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
} 
 

 
.trigger { 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
@keyframes hide{ 
 
    0% { transform: translate(0);} 
 
    20% { transform: translate(5px);} 
 
    100% { transform: translate(-120vw);} 
 
} 
 

 
@keyframes show { 
 
    0% { transform: translate(-120vw);} 
 
    80% { transform: translate(-5px);} 
 
    100% { transform: translate(0vw);} 
 
} 
 

 
.hide { 
 
    animation: hide 0.5s forwards ease-in-out; 
 
    animation-delay: .2s; 
 
} 
 

 
.show { 
 
    animation: show 0.5s forwards ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='target'>&nbsp;</div> 
 
<button class='trigger'>Trigger</button>

출처

2016-10-21 00:03:07 Sam0

아래로, 눈에 보이는 0.2 초 리셋을 방지해야 .show CSS에있는 속성

$('.trigger').click(function() { 
 

 
    if (!$('.target').hasClass('hide')) { 
 
    \t $('.target').addClass('hide') 
 
    } else { 
 
    $('.target').css({"transform":"translate(120vw)"}); 
 
    $('.target').addClass('show') 
 
    } 
 
    
 
})

.target { 
 
    height: 50px; 
 
    width: 50px; 
 
    background-color: blue; 
 
    margin: 0 auto; 
 
} 
 

 
.trigger { 
 
    margin: 0 auto; 
 
    display: block; 
 
} 
 

 
@keyframes hide{ 
 
    0% { transform: translate(0);} 
 
    20% { transform: translate(5px);} 
 
    100% { transform: translate(-120vw);} 
 
} 
 

 
@keyframes show { 
 
    0% { transform: translate(-120vw);} 
 
    80% { transform: translate(-5px);} 
 
    100% { transform: translate(0);} 
 
} 
 

 
.hide { 
 
    animation: hide 0.5s forwards ease-in-out; 
 
    animation-delay: .2s; 
 
} 
 

 
.show { 
 
    animation: show 0.5s forwards ease-in-out; 
 
    animation-delay: .2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<div class='target'>&nbsp;</div> 
 
<button class='trigger'>Trigger</button>

출처

2016-10-21 00:18:47

CSS 애니메이션을 사용하여 요소를 화면 밖으로 이동 한 다음 뒤로 이동

답변

관련 문제