Question

我使用CSS动画和jQuery在日历上打开多个襟翼。只要用户等待动画结束然后单击下一个动画，这就很有用。但是当一个开放动画仍然在运行，并且用户已经开始下一个时，脚本就会中断，我的类opend将从.fenster div和窗口中删除，从而破坏布局。

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

$( 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

我认为是因为你告诉程序 - ＆＃34;点击，如果这有类开放，做一些，时间，工作和删除opend类＆＃34;因为您在最后删除了课程，如果之前再次点击，则该课程不会转到该点。方式可以使用其他指标顶部检查状态。例如：

$( document ).on("click" , '.flap' , function(){
        if ($(this).parent(".fenster").hasClass("justEmptyClass")) {
            $(this).parent(".fenster").removeClass("justEmptyClass");

或使用变量 - 使用false / rue设置和检查状态：

var open = true;
$( document ).on("click" , '.flap' , function(){
        if (open) {
            open = false;

//并休息你的代码

Answer 2

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

向动画元素添加一个类，表示它在动画
使用额外的.one()方法到您的首字母的else代码块条件语句你可以再次删除上述类动画完成后
在第一个.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>

jquery（this）.parent.hasClass在动画中给出误报

2 个答案: