javascript - jquery (this).parent.hasClass 在动画中给出误报

Question

我使用 CSS 动画和 jQuery 在日历上打开多个翻盖。只要用户等待动画结束然后单击下一个动画，它就可以很好地工作。但是当打开动画仍在运行时，用户已经开始下一个动画，脚本中断并且我的类 opend 从 .fenster div 和 window 中删除布局。

有人看到我的脚本哪里有问题吗？

$( document ).on("click" , '.flap' , function(){
    if ($(this).parent(".fenster").hasClass("opend")) {
	    $(this).removeClass("flap_open" ).addClass("flap_close" );
		$(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
		    $(this).next().hide();
		    $(this).removeClass("flap_close");
		    $(this).parent(".fenster").removeClass("opend");
		});
	} else {
	    $(this).addClass("flap_open" );
	    $(this).parent(".fenster").addClass("opend");
	    //$(this).removeClass("flap_close" );
	    $(this).next().show();
	}	
});

.fenster {
	width: 30%;
	min-width: 130px;
	max-width: 300px;
	border: 1px solid rgba(212, 212, 212, 1);
	position: relative;
    left: 200px;
	z-index: 200;
	cursor: pointer;
}
.opend {
	perspective: 1500px;
	-webkit-perspective: 1500px;
	box-shadow: inset 0px 0px 5px #2e2d2e;
	cursor: auto;
	-webkit-backface-visibility: hidden;
}
.flap {
	width: 100%;
	height: 100%;
	z-index: 100;
  background-color: red;
}
.flap:before {
	content: "";
	display: block;
	padding-top: 75%;
}
.flap_open {
	transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	background-size: cover;
	width: 100%;
	height: 100%;
	z-index: 100;
	cursor: alias;
	animation: turn 4s forwards;
	-webkit-animation: turn 4s forwards;
	box-shadow:  5px 0px 5px 0px #2e2d2e;
}
.flap_close {
	transform-origin: 0 50%;
	-webkit-transform-origin: 0 50%;
	-webkit-animation: zumachen 4s forwards;
	animation: zumachen 4s forwards;
	opacity: 0.8;
	box-shadow:  5px 0px 5px 0px #2e2d2e;
	transform: rotateY(-100deg);
}
.button{
	position: absolute;
	bottom: 2%;
	left: 15%;
	width: 70%;
	height: 5vh;
	min-width: 80px;
	min-height: 28px;
	max-height: 20px;
	z-index: -1;
	text-align: center;
	display: table;
  background-color: grey;
}
@keyframes turn {
  to {
	 transform: rotateY(-100deg); 
	 opacity: 0.8;
	 box-shadow:  5px 0px 5px 0px #2e2d2e;
	 visibility: visible;
  }
}
@-webkit-keyframes turn {
  to {
	 -webkit-transform: rotateY(-100deg); 
	 -webkit-opacity: 0.8;
	 box-shadow:  5px 0px 5px 0px #2e2d2e;
	 visibility: visible;
  }
}
@keyframes zumachen {
  to {
	 transform: rotateY(0deg); 
	 opacity: 1;
	 box-shadow:  none;
	 visibility: visible;
  }
}
@-webkit-keyframes zumachen {
  to {
	 -webkit-transform: rotateY(0deg); 
	 -webkit-opacity: 1;
	 box-shadow:  none;
	 visibility: visible;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
<div class="flap"></div>
<div class="button" style="display: none;"><span>Something</span></div>
</div>

Answer 1

如果添加一个指示动画正在运行的类，则可以运行检查以确保任何当前动画元素不会受到在任何关闭时调用的 .removeClass() 方法的影响元素。

1. 给动画元素添加一个类，表明它在动画
2. 使用附加的 .one() 方法到您初始的 else 代码块条件语句你可以再次删除这个前面提到的类一旦动画完成
3. 在第一个.one()方法中插入另一个条件检查您的初始条件检查以验证中的元素问题没有类 .animation-running，因此表明它应该删除必要的类。

$(document).on("click", ".flap", function() {
  if ($(this).parent(".fenster").hasClass("opend")) {
    $(this).removeClass("flap_open").addClass("flap_close");
    $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
      if (!$(this).parent(".fenster").hasClass("animation-running")) {
        /* only step into next code block if condition is equal to true, 
         * i.e: parent does not have the class "animation-running", so animation is completed 
         */
        $(this).next().hide();
        $(this).removeClass("flap_close");
        $(this).parent(".fenster").removeClass("opend");
      }
    });
  } else {
    $(this).addClass("flap_open");
    $(this).parent(".fenster").addClass("opend animation-running"); /* Additional class to indicate animation is running */
    $(this).next().show();
    /* Only once animation has completed should the indicating class be removed */
    $(this).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(e) {
      $(this).parent(".fenster").removeClass("animation-running");
    });
  }
});

.fenster {
  width: 30%;
  min-width: 130px;
  max-width: 300px;
  border: 1px solid rgba(212, 212, 212, 1);
  position: relative;
  left: 200px;
  z-index: 200;
  cursor: pointer;
}

.opend {
  perspective: 1500px;
  -webkit-perspective: 1500px;
  box-shadow: inset 0px 0px 5px #2e2d2e;
  cursor: auto;
  -webkit-backface-visibility: hidden;
}

.flap {
  width: 100%;
  height: 100%;
  z-index: 100;
  background-color: red;
}

.flap:before {
  content: "";
  display: block;
  padding-top: 75%;
}

.flap_open {
  transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: 100;
  cursor: alias;
  animation: turn 4s forwards;
  -webkit-animation: turn 4s forwards;
  box-shadow: 5px 0px 5px 0px #2e2d2e;
}

.flap_close {
  transform-origin: 0 50%;
  -webkit-transform-origin: 0 50%;
  -webkit-animation: zumachen 4s forwards;
  animation: zumachen 4s forwards;
  opacity: 0.8;
  box-shadow: 5px 0px 5px 0px #2e2d2e;
  transform: rotateY(-100deg);
}

.button {
  position: absolute;
  bottom: 2%;
  left: 15%;
  width: 70%;
  height: 5vh;
  min-width: 80px;
  min-height: 28px;
  max-height: 20px;
  z-index: -1;
  text-align: center;
  display: table;
  background-color: grey;
}

@keyframes turn {
  to {
    transform: rotateY(-100deg);
    opacity: 0.8;
    box-shadow: 5px 0px 5px 0px #2e2d2e;
    visibility: visible;
  }
}

@-webkit-keyframes turn {
  to {
    -webkit-transform: rotateY(-100deg);
    -webkit-opacity: 0.8;
    box-shadow: 5px 0px 5px 0px #2e2d2e;
    visibility: visible;
  }
}

@keyframes zumachen {
  to {
    transform: rotateY(0deg);
    opacity: 1;
    box-shadow: none;
    visibility: visible;
  }
}

@-webkit-keyframes zumachen {
  to {
    -webkit-transform: rotateY(0deg);
    -webkit-opacity: 1;
    box-shadow: none;
    visibility: visible;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fenster f7 p3">
  <div class="flap"></div>
  <div class="button" style="display: none;"><span>Something</span></div>
</div>
<div class="fenster f3 p1">
  <div class="flap"></div>
  <div class="button" style="display: none;"><span>Something</span></div>
</div>