javascript - jquery 检查事件和 css 动画

Question

我制作了一个 css 动画并使用 jquery 触发了复选框事件。但这有时不起作用。我不明白我做错了什么。有人知道我做错了什么吗？

预期 - 如果输入被选中或未被选中(任何检查事件)，总是动画文本

得到 - 有时有效，有时无效，例如多次点击

代码笔 https://codepen.io/billyjov/pen/GxzOLZ

代码

$(function() {

    $(".animated").addClass("grow-one");
    
    var $checkbox = $(".checkbox");
    var $animatedText = $("#animatedText")
  $checkbox.change(function () {
		if ($animatedText.hasClass("grow-one")) {
			$animatedText.removeClass("grow-one");
		} else {
			$animatedText.removeClass("grow-two");
		}
		if (this.checked && !$animatedText.hasClass("grow-two")) {
			$animatedText.addClass("grow-two");
		} else {
		
			if ($animatedText.hasClass("grow-two")) {
				$animatedText.removeClass("grow-two");
			}
			$animatedText.addClass("grow-one");
		}
	});

})

.grow-in.grow-one {
    -webkit-animation-name: grow-one;
    animation-name: grow-one;
}

.grow-in.grow-two {
  -webkit-animation-name: grow-two;
    animation-name: grow-two;
}


.grow-in {
    -webkit-transform: scale(0.2);
    transform: scale(0.2);
    opacity: 0;
}

.slower {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

h1 {
    font-family: 'Lato', sans-serif;
    font-size: 32px;
    line-height: 62px;
    font-weight: 300;
    color: #000;
    text-align: center;
}

.checkboxes {
  text-align: center;
}


@keyframes grow-one {
    0% {
    transform: scale(0.2);
    opacity: 0;
    }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes grow-two {
   100% {
    transform: scale(0.2);
    opacity: 0;
    }
  
  50% {
    transform: scale(1.2);
  }
  
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

<h1 class="animated grow-in slower" id="animatedText">CSS3 Animate It</h1>


<div class="checkboxes">
  <div class="checkbox-item">
    <span>item1</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item2</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item3</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item4</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item5</span>
    <input type="checkbox" class="checkbox">
  </div>
  <div class="checkbox-item">
    <span>item6</span>
    <input type="checkbox" class="checkbox">
  </div>
</div>

Answer 1

如果您将 $checkbox.change() 函数替换为此，它会按照您描述的方式工作:

$checkbox.change(function () {
    $animatedText.toggleClass("grow-two");
  });

https://codepen.io/anon/pen/KojjyL?editors=1010