jquery - CSS 过渡在过渡结束后未触发

Question

我在通过 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>

Answer 1

一个相当简单而优雅的解决方案:

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