I'm currently troubleshooting the demo below. For some reason, I am unable to apply a transition
to either .fa-chevron-right
or .fa-chevron-left
when toggling between two classes. Can anyone help me figure out why?
$("button").on("click", function(){
$('.fa').toggleClass('fa-chevron-right fa-chevron-down');
});
body{padding:30px;}
button{padding:12px; min-width:60px;}
.fa-chevron-down{
transition: all 3s ease;
}
.fa-chevron-right{
transition: all 3s ease;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<button class="btn btn-default"> <i class="fa fa-chevron-right pull-right" aria-hidden="true"></i></button>