CODEWITHSUNDEEP
javascriptjquerycsscss-transitions
user1760110
user1760110

Reputation: 2336

Adding a transition to two classes on toggling

I am working on the below demo. Why am I 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>

Upvotes: 1

Views: 37

Answers (1)

Alejandro C.
Alejandro C.

Reputation: 3801

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>

Upvotes: 3

Related Questions