user1760110 user1760110 - 23 days ago 6
Javascript Question

Issue on Adding Transition to Two Classes on Toggeling

Can you please take a look at this demo and let me know why I am not able to add

transition
to each of
.fa-chevron-right
or
.fa-chevron-left
on toggling two classes?



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




Answer

CSS transition is for changing CSS properties (think background-color or width). Your css class is simply changing the image that's rendered, not actually changing any css styles. CSS transition would work if you used something like transform: rotate(0.25turn); instead of two different images.

$("button").on("click", function(){
  $('.fa').toggleClass('css-chevron-right css-chevron-down');
});
body{padding:30px;}
button{padding:12px; min-width:60px;}
.css-chevron-down{
  transform: rotate(0.25turn);
  transition: all 3s ease;
}
.css-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 css-chevron-right pull-right" aria-hidden="true"></i></button>