我在通过 jQuery 触发转换时遇到一些问题。
第一个过渡完成后,我希望另一个 div 淡入,但不透明度不执行过渡。它直接变为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>
最佳答案
一个相当简单而优雅的解决方案:
$('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>
关于jquery - CSS 过渡在过渡结束后未触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46107619/