CSS Transition not firing after transition end

Question

I am having some problems with firing transitions through jQuery.
After the first transition completes, I want the other div to fade in, but the opacity do not executes de transition. It goes straight to opacity: 1;.
I was able to work around with setTimeout, but I was wondering if there's a problem in my code or something

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

A rather simple and elegant solution:

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

Answer 2

Try this:

var endTransition = "webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend";

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

• use more browser-specific event names for cross-browser compatibility.
• use off() to remove all former event binds.
• EDIT: it seems your problem is you have .css('display','inline-block') before you call .css('opacity','1'). That's the reason your element is showing up immediately because of css display: inline-block.