アニメーションが読み込み時にトリガーされ、クラスが削除されたときにデフォルトの状態にアニメーションされます。

Question

要素にクラスを追加することでトリガーされるアニメーションを実行しています。アニメーションを逆にするクラスを削除すると、アニメーションを元に戻す方法がわかりました。問題はそれが引き起こす負荷です。それを防ぐために私は何ができますか、私は何が変わることができますか、私は何が欠けていますか？

完全なHTML/CSS/JSはここfiddle

にある良い部分、

@keyframes expand { 
    20% { 
    opacity: 0; 
    width: 5rem; 
    } 
    70%, 100% { 
    opacity: 1; 
    transform: translate(0, 0); 
    width: 100%; 
    } 
} 

@keyframes contract { 
    0% { 
    transform: translate(0, 0); 
    width: 100%; 
    } 
    100% { 
    transform: translate(0, -6rem); 
    width: 5rem; 
    } 
} 

[data-am-button~="buy"] { 
    margin-bottom: .5rem; 
    transform: translate(0, -6rem); 
    width: 5rem; 
    animation: contract 500ms forwards; 

    span { 
     display: none; 
    } 

    .is-expanded & { 
     animation: expand 500ms forwards; 
    } 
} 

Answer 1

ので、代わりのデフォルトでは、ボタンの上にアニメーションを入れています。アニメーションを.is-contractedクラスに追加します。

ボタンをクリックすると、これらの2つのクラスを切り替えることができます。つまり、ページの読み込み時に何もアニメ化されません。ボタンをクリックするだけです。

CSSの変更：

[data-am-button~="buy"] { 
    margin-bottom: .5rem; 
    transform: translate(0, -6rem); 
    width: 5rem; 
    //animation: contract 500ms forwards;    <-- Removed this 

    span { 
     display: none; 
    } 

    .is-expanded & { 
     animation: expand 500ms forwards; 
    } 
    .is-contracted & { 
    animation: contract 500ms forwards;// <-- added it to this new class 
    } 

JSの変更：

$('.js-expander').on('click', function() { 
    var $this = $(this); 
    var $parent = $this.parents('.product-info'); 
    if ($parent.hasClass('is-expanded')){ 
     $parent.removeClass('is-expanded') 
     $parent.addClass('is-contracted') 
    } else { 
     $parent.addClass('is-expanded') 
     $parent.removeClass('is-contracted') 
    } 
}); 

ここでフィドルです：https://jsfiddle.net/BradChelly/Lugnmmpe/7/