Jquery 转换结束后未触发CSS转换

我在通过jQuery启动转换时遇到一些问题。
第一次转换完成后，我希望另一个div淡入，但不透明度不执行反转换。它直接进入

opacity:1

我可以使用
setTimeout
，但我想知道我的代码中是否有问题


var endTransition=“transitionend”；
$（“#测试”）。单击（函数（）{
$（this）.css（'opacity'，'0'）.one（endTransition，function（）{
$（'#test'）.css（'display'，'none'）；
$（'#test2'）.css（'display'，'inline block'）.css（'opacity'，'1'）；
});
});
$（'#test2'）。单击（函数（）{
$（this）.css（'opacity'，'0'）.one（endTransition，function（）{
$（'#test2'）.css（'display'，'none'）；
$（'#test'）.css（'display'，'inline block'）.css（'opacity'，'1'）；
});
});
#测试{
显示：内联块；
背景：红色；
不透明度：1；
宽度：200px；
高度：200px；
过渡：不透明度。5s缓解；
}
#测试2{
背景：蓝色；
显示：无；
不透明度：0；
宽度：200px；
高度：200px；
过渡：不透明度。5s缓解；
}

试试这个：

var endTransition = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";

$('#test').click(function() {
    $(this).css('opacity',0).off().one(endTransition, function(e) {
        // your callback
    });
});


使用更多特定于浏览器的事件名称以实现跨浏览器兼容性
使用
off（）
删除所有以前的事件绑定
编辑：您的问题似乎是在调用
.css（'display'，'inline-block'）
之前，您有
.css（'opacity'，'1'）
。这就是由于css
display:inline block
而立即显示元素的原因
一个相当简单而优雅的解决方案：


$（'div'）。单击（函数（）{
$（this）.fadeOut（函数（）{
$（'div'）.not（this.fadeIn（）.css（“显示”、“内联块”）；
});
});
#测试{
显示：内联块；
背景：红色；
宽度：200px；
高度：200px；
}
#测试2{
背景：蓝色；
显示：无；
宽度：200px；
高度：200px；
}

您的问题似乎是在调用
.css（'display'，'inline-block'）
之前有
.css（'opacity'，'1'）
。这就是由于css
display:inline block
而立即显示元素的原因。首先，谢谢你的帮助。所以，我需要第二个div是
display:inline块，这对我来说是个大问题。有没有办法做到这一点？顺便说一句，我试图使动画是css转换。我正在构建一个web应用程序，所以我尝试制作尽可能平滑的动画，我注意到CSS转换比jQuery动画更平滑。在显示div
inline block
时制作div是一个简单的修复方法-我将其添加到上面的代码片段中。至于CSS转换-
fadeIn（）
和
fadeOut（）
是CSS不透明转换，最后显示为
none
，但通过jQuery通过JavaScript控制。使用jQuery的ready函数可以使代码更短、更整洁，这就是jQuery的全部功能。如果不使用jQuery，您将不得不编写自己的函数来控制不透明度，问题是-它是否会比jQuery更快、更安全、更兼容跨浏览器？我说坚持使用经过测试的JS（在本例中是jQuery）。