为什么此 CSS 过渡仅在某些单击时才能正常工作?如何解决?

我尝试用jQuery创建一个CSS过渡链。第一个转换由单击事件触发，第二个转换由转换结束事件触发。

预期过程是这样的：
点击 -->放大 -->等待 1s --> 在 y 轴上旋转 &收缩
要求：在过渡期间，最新点击的元素必须位于其他元素的前面

我像这样对问题进行建模：类"放大"用于
向上缩放，类"spinY"用于旋转。
单击事件 --> 添加类"放大">
过渡结束事件 --> 删除类"放大"和类"spinY"，如果有类"spinY"，否则添加类"spinY">

$(function() {
var zValue = 0;
// event listener detect click
$(".main ").on("click", "div.flat", function() {
if (!$(this).hasClass("spinY", "enlarge")) {
// increment z variable & set z-index to it
$(this).css("z-index", ++zValue);
// add class for css transition, enlarge
$(this).addClass("enlarge");
}
});
// event listener detect end of transition
$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function() {
if ($(this).hasClass("spinY")) {
$(this).removeClass("enlarge spinY");
} else {
$(this).addClass("spinY");
}
});
});

.flat, .labeling {
	position: relative;
	background: white;
	height: 3em;
	width: 3em;
}
.flat, .flat .rect {
	border: 1px solid silver;
}
.rect {
	position: relative;
	left: 0.2em;
	top: 0.15em;
	height: 70%;
	width: 80%;
	text-align: center;
	line-height: 200%;
}
.available .rect{
	color: white;
	background: #FFAA00;
}
.flat.enlarge {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
	transform: rotateY(0turn) scale(3.2);
}
.flat.spinY {
	-webkit-transition: all 1 linear 1s;
	transition: all 1 linear 1s;
	transform: rotateY(5turn);
}

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="main">
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
</div>
</body>
</html>

小提琴：https://jsfiddle.net/9xqvd7ng/1/随意尝试代码。

我希望每次点击都会触发上述相同的过程。但是，我发现除了第一次单击外，跳过了其他的旋转过渡。请解释原因并提供解决方案。谢谢大家！

无需在 JS 代码中增加z-index，只需在 CSS 中将转换后的元素的z-index提高

$(function() {
var zValue = 0;
// event listener detect click
$(".main ").on("click", "div.flat", function() {
if (!$(this).hasClass("spinY", "enlarge")) {
// add class for css transition, enlarge
$(this).addClass("enlarge");
}
});
// event listener detect end of transition
$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function() {
if ($(this).hasClass("spinY")) {
$(this).removeClass("enlarge spinY");
} else {
$(this).addClass("spinY");
}
});
});

.flat,
.labeling {
position: relative;
background: white;
height: 3em;
width: 3em;
}
.flat,
.flat .rect {
border: 1px solid silver;
}
.rect {
position: relative;
left: 0.2em;
top: 0.15em;
height: 70%;
width: 80%;
text-align: center;
line-height: 200%;
}
.available .rect {
color: white;
background: #FFAA00;
}
.flat.enlarge {
transition: all 1s ease;
transform: rotateY(0turn) scale(3.2);
z-index: 1;
}
.flat.spinY {
transition: all 1 linear 1s;
transform: rotateY(5turn);
z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="main">
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
</div>

或者，如果您想将z-index保留在 JS 代码中，请使转换更具体，使其仅针对转换，您将避免在更改z-index时触发transitionend：

$(function() {
var zValue = 0;
// event listener detect click
$(".main ").on("click", "div.flat", function() {
if (!$(this).hasClass("spinY", "enlarge")) {

$(this).css("z-index", ++zValue);
// add class for css transition, enlarge
$(this).addClass("enlarge");
}
});
// event listener detect end of transition
$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function() {
if ($(this).hasClass("spinY")) {
$(this).removeClass("enlarge spinY");
} else {
$(this).addClass("spinY");
}
});
});

.flat,
.labeling {
position: relative;
background: white;
height: 3em;
width: 3em;
}
.flat,
.flat .rect {
border: 1px solid silver;
}
.rect {
position: relative;
left: 0.2em;
top: 0.15em;
height: 70%;
width: 80%;
text-align: center;
line-height: 200%;
}
.available .rect {
color: white;
background: #FFAA00;
}
.flat.enlarge {
transition: transform 1s ease;
transform: rotateY(0turn) scale(3.2);
}
.flat.spinY {
transition: transform 1 linear 1s;
transform: rotateY(5turn);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="main">
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
<div class="flat available">
<div class="rect"></div>
</div>
</div>

代码的主要问题是您正在执行 2 个属性(z-index 和转换(的转换，因此您触发transitionend两次。为了更好地说明问题，请添加console.log()您会注意到您正在快速添加/删除旋转类：

$(function(){	
	var zValue = 0;
	
	// event listener detect click
	$(".main ").on("click", "div.flat", function(){
		if (!$(this).hasClass("spinY", "enlarge")) {
			// increment z variable & set z-index to it
$(this).css("z-index", ++zValue);
			// add class for css transition, enlarge
			$(this).addClass("enlarge");
		}
	});
	// event listener detect end of transition
	$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function(){
console.log('end!');
		if($(this).hasClass("spinY")) {
			$(this).removeClass("enlarge spinY");
console.log('Remove class');
		} else {
			$(this).addClass("spinY");
console.log('add class');
		}
	});
});

.flat, .labeling {
	position: relative;
	background: white;
	height: 3em;
	width: 3em;
}
.flat, .flat .rect {
	border: 1px solid silver;
}
.rect {
	position: relative;
	left: 0.2em;
	top: 0.15em;
	height: 70%;
	width: 80%;
	text-align: center;
	line-height: 200%;
}
.available .rect{
	color: white;
	background: #FFAA00;
}
.flat.enlarge {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
	transform: rotateY(0turn) scale(3.2);
}
.flat.spinY {
	-webkit-transition: all 1 linear 1s;
	transition: all 1 linear 1s;
	transform: rotateY(5turn);
}

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="main">
			<div class="flat available">
				<div class="rect"></div>
			</div>
	<div class="flat available">
				  <div class="rect"></div>
			  </div>
<div class="flat available">
<div class="rect"></div>
</div>
		</div>
	</body>
</html>

这不会在第一次发生，因为最初没有为z-index设置值，因此您将没有转换。

设置一个默认值，即使是第一个你也不会得到任何东西：

$(function(){	
	var zValue = 0;
	
	// event listener detect click
	$(".main ").on("click", "div.flat", function(){
		if (!$(this).hasClass("spinY", "enlarge")) {
			// increment z variable & set z-index to it
$(this).css("z-index", ++zValue);
			// add class for css transition, enlarge
			$(this).addClass("enlarge");
		}
	});
	// event listener detect end of transition
	$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function(){
console.log('end!');
		if($(this).hasClass("spinY")) {
			$(this).removeClass("enlarge spinY");
console.log('Remove class');
		} else {
			$(this).addClass("spinY");
console.log('add class');
		}
	});
});

.flat, .labeling {
	position: relative;
	background: white;
	height: 3em;
	width: 3em;
}
.flat, .flat .rect {
	border: 1px solid silver;
z-index:0;
}
.rect {
	position: relative;
	left: 0.2em;
	top: 0.15em;
	height: 70%;
	width: 80%;
	text-align: center;
	line-height: 200%;
}
.available .rect{
	color: white;
	background: #FFAA00;
}
.flat.enlarge {
	-webkit-transition: all 1s ease;
	transition: all 1s ease;
	transform: rotateY(0turn) scale(3.2);
}
.flat.spinY {
	-webkit-transition: all 1 linear 1s;
	transition: all 1 linear 1s;
	transform: rotateY(5turn);
}

<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>
	<body>
		<div class="main">
			<div class="flat available">
				<div class="rect"></div>
			</div>
	<div class="flat available">
				  <div class="rect"></div>
			  </div>
<div class="flat available">
<div class="rect"></div>
</div>
		</div>
	</body>
</html>

解决方案是避免更改 z-index(或任何其他属性(或调整过渡以仅使用转换。

理论上，你正在做的事情应该完成这项工作，问题是在转换已经在进行时应用 z-index，这只是一个同步问题。

$(function(){   
var zValue = 0;
// event listener detect click
$(".main ").on("click", "div.flat", function(){
if (!$(this).hasClass("spinY", "enlarge")) {
/*
set z-index that will suffice since the other elements do not
have one defined      
*/
$(this).css("z-index",1);
// add class for css transition, enlarge
$(this).addClass("enlarge");
}
});
// event listener detect end of transition
$(".main ").on("transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd", "div.flat", function(){
if($(this).hasClass("spinY")) {
$(this).removeClass("enlarge spinY");
} else {
$(this).addClass("spinY");
}
/*
delete the property and so clicked will always have a 
greater position
*/ 
$(this).css("z-index","");
});
});

IM 分叉了您的示例，以便您可以看到它的工作原理

https://jsfiddle.net/michelnovellino/jxag7859/6/

相关内容

最新更新

热门标签：