Question

如果单击button 2，将看到animation运行。但是，当我使用其他功能对按钮进行更改时（选中复选框以显示。隐藏按钮），动画将再次运行，就像再次被按下一样。

如何防止每次单独的功能更改按钮时触发动画？即位于toggle或show/ hide上？

$(function() {
  $("button").click(function() {
    $(this).addClass("active");
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggle();
  });
});

button {
  background: silver;
}

button.active {
  background: green;
  -webkit-animation: bounce 300ms none;
  animation: bounce 300ms none;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <input type="checkbox">
  <button>
  Button 1
</button>
  <button id="hide">
  Button 2
</button>
</section>

Answer 1

由于$.toggle和$.hide将display设置为none，所有先前计算的样式都将被丢弃。因此，当此规则在以后删除时，CSS引擎将设置一个新的animation规则，并从头开始。

为避免您有多种选择。

第一个是面向JS的，并允许您保留jQuery的方法。

您需要在按钮的单击处理程序中添加一个逻辑，该逻辑将添加仅用于设置动画的特定类。这样，动画将仅在此click事件中被触发。通过收听下一个animationend事件，您可以等到动画结束后，再从中删除动画类：

$(function() {
  $("button").click(function() { // only on button's click
    $this = $(this);
    // already active, return early
    if($this.hasClass('active')) return;
    // add both classes
    $this.addClass("active bounce")
      .one('animationend', function() { // when the animation is finished
        $this.removeClass('bounce'); // deactivate
      });
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggle();
  });
});

button {
  background: silver;
}

button.active {
  background: green;
}
button.bounce {
  -webkit-animation: bounce 300ms none;
  animation: bounce 300ms none;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <input type="checkbox">
  <button>
  Button 1
</button>
  <button id="hide">
  Button 2
</button>
</section>

另一种解决方案，即使对jQuery不太友好，也可能更清洁，它是用不显示任何内容的其他方式隐藏元素：

button.hidden {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

$(function() {
  $("button").click(function() {
    $(this).addClass("active")
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggleClass('hidden');
  });
});

button {
  background: silver;
}

button.active {
  background: green;
  -webkit-animation: bounce 300ms none;
  animation: bounce 300ms none;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
/* our hidden class */
button.hidden {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
}

@keyframes bounce {
  0% {
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
  }
  50% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
  <input type="checkbox">
  <button>
  Button 1
</button>
  <button id="hide">
  Button 2
</button>
</section>

Answer 2

您的问题是由切换test属性引起的。
您可以使用另一种方式隐藏元素，例如：

display

$(function() {
  $("button").click(function() {
    $(this).addClass("active");
  });

  $("input").on("change", function() {
    $(this)
      .closest("section")
      .find("#hide")
      .toggleClass('hidden');
  });
});

button {
  background: silver;
}

button.active {
  background: green;
  animation: bounce 300ms ease-in-out;
}

.hidden {position:fixed; top:-150%}

@keyframes bounce {
  0% {
    transform: scale(.7);
  }
  50% {
     transform: scale(1.2);
  }
}

仅在添加类时才触发CSS关键帧

2 个答案: