Html 加载时动画触发，移除类时动画设置为默认状态

我正在制作一个动画，通过向元素添加一个类来触发它。现在，在移除这个类之后，我想让动画走另一条路，我找到了如何反转动画的方法，问题是它触发了加载。我能做些什么来防止它，我能改变什么，我错过了什么

完整的html/css/js在

这里是好的部分

@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;
    }
}

---

因此，不要在默认情况下将动画放在按钮上。将动画添加到

.is contracted

类

然后单击按钮时在这两个类之间切换。这意味着页面加载时没有设置动画。只有按钮在点击

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-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')
  }
});