更改图标时如何向按钮添加 CSS3 动画

Question

I am trying to have CSS transition for a button when the font-awesome icon inside the button changes ie using jQuery one icon is replaced with the other.

To give a better understanding of this, here is my HTML:

     <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <i class="fa fa-navicon fa-lg"></i>
     </button>  

The jQuery that replaces the icon:

$(".navbar-toggle").on("click", function () {
        $(this).toggleClass("active");
        $('body').toggleClass("navbar-is-active");
        $('.navbar-toggle i').toggleClass('fa-navicon');
        $('.navbar-toggle i').toggleClass('fa-remove');
    });

The CSS styles for the button and CSS transition:

.navbar-toggle {
    width: 81px;
    height: 80px;
    background: #c4414f!important;
    border-radius: 0;
    border: 0 none;
    margin: 0;
    padding-left: 29px;
    z-index: 2000;
}

.navbar-default .navbar-toggle .icon-bar {
        background-color: #FFF;
        height: 3px;
        border-radius: 0;
    } 
    .navbar-toggle.active {
        -webkit-box-shadow:inset 1px 1px 1px 1px #000000;
        box-shadow: -1px 1px 1px 0px #333333;
    }

.navbar-toggle {
    color: #FFF;
    padding-left: 10px;
}
    .navbar-toggle i {
        font-size: 24px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

But the transition is not working on the button when the menu icon is changed to an 'X'. What am I doing wrong? I have made a Fiddle:

https://jsfiddle.net/471L8dfd/

As requested, an example of the type of transition i am looking to add to the nav button:

Answer 1

Using fadeOut and fadeIn functions would do the trick:

 $(".navbar-toggle").on("click", function () {
     $(this).toggleClass("active");
     $('body').toggleClass("navbar-is-active");
     $('.navbar-toggle i').fadeOut(100, function(){
         $(this).toggleClass('fa-navicon');
     })
     $('.navbar-toggle i').toggleClass('fa-remove').fadeIn(150);
 });

https://jsfiddle.net/471L8dfd/3/

Edit: Note that class is toggled after fadeOut is order to prevent popping of icons and that the first animation speed (at 100ms) belongs to current icon fadeOut and the second to the next icon fadeIn . Your total animation speed is these two values combined (100+150 = 250ms)