要素を画面外に移動し、CSSアニメーションで戻す

Question

次の例では、滑らかなslideIn/Outアニメーションで要素の位置を制御することを目標にしています。

問題は、新しいクラスを追加して最初のアニメーションを上書きし、アニメーションの2番目の部分が要素の位置を0にリセットしてからslideInを再び開始することです。

以下のスニペットは、私が説明しようとしたことをよりよく示します。

$('.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>

Answer 1

あなたはアニメーション遅延を削除する場合は、

$('.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>

Answer 2

以下のように、目に見える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>