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

この試しに問題があります場合、私は思っていた：

var endTransition = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend"; 

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

• 使用はブラウザ間の互換性のために、より多くのブラウザ固有のイベント名。
• off()を使用して、以前のすべてのイベントバインドを削除します。
• 編集：.css('opacity','1')に電話する前に.css('display','inline-block')を持っていることに問題があるようです。それはあなたの要素がCSS display: inline-blockのためにすぐに現れている理由です。

Answer 2

ではなく、シンプルでエレガントなソリューション：あなたの問題はあなたが `の.css持っているようです

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