Question

我正在做一个通过向元素添加类而触发的动画。现在删除类我想让动画走向另一个方向，我想出了如何反转动画，问题是onload它触发它。我能做些什么来阻止它，我可以改变什么，我缺少什么？

完整的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类。

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

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/

动画在加载时触发，在删除类时动画为默认状态

1 个答案: