クラスを変更してアニメーションをスライドさせる

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がというトーストを持っていたいと思います。

アニメーションロジックshowを20pxの代わりに-50pxを使用して複製しようとしました。それはうまくいかなかった。ブロックを隠してからスライディングして見せた。

これを行う正しい方法は何ですか？

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がアニメーションを処理します。