转换结束后CSS转换没有触发

Question

我在通过jQuery发起转换时遇到了一些问题。
第一次转换完成后，我希望其他div淡入，但不透明度不会执行de过渡。它直接到opacity: 1;。
我能解决与setTimeout，但我在想，如果有一个在我的代码有问题或东西

var endTransition = "transitionend"; 
 

 
$('#test').click(function() { 
 
    $(this).css('opacity', '0').one(endTransition, function() { 
 
    $('#test').css('display', 'none'); 
 
    $('#test2').css('display', 'inline-block').css('opacity', '1'); 
 
    }); 
 
}); 
 

 
$('#test2').click(function() { 
 
    $(this).css('opacity', '0').one(endTransition, function() { 
 
    $('#test2').css('display', 'none'); 
 
    $('#test').css('display', 'inline-block').css('opacity', '1'); 
 
    }); 
 
});

#test { 
 
    display: inline-block; 
 
    background: red; 
 
    opacity: 1; 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: opacity .5s ease; 
 
} 
 

 
#test2 { 
 
    background: blue; 
 
    display: none; 
 
    opacity: 0; 
 
    width: 200px; 
 
    height: 200px; 
 
    transition: opacity .5s ease; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test'></div> 
 
<div id='test2'></div>

Answer 1

试试这个：

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而立即显示的原因。

Answer 2

一个相当简单和优雅的解决方案：

$('div').click(function() { 
 
    $(this).fadeOut(function() { 
 
    $('div').not(this).fadeIn().css("display","inline-block"); 
 
    }); 
 
});

#test { 
 
    display: inline-block; 
 
    background: red; 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
#test2 { 
 
    background: blue; 
 
    display: none; 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='test'></div> 
 
<div id='test2'></div>