I'm working on implementing a CSS transition for a button that changes when the font-awesome icon inside the button is replaced with another using jQuery.
Here is my HTML code for better understanding:
<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 script that handles the icon replacement:
$(".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');
});
Below are the CSS styles and transition effects applied to the button:
.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;
}
The issue I'm facing is that the transition does not work on the button when the menu icon changes to an 'X'. What could be causing this problem?
Here is a link to the Fiddle showcasing the code:
https://jsfiddle.net/471L8dfd/
For reference, here is an example of the type of transition effect I am trying to achieve with the navigation button: