在切换时向两个类添加过渡

Question

我正在做下面的演示。为什么我不能在切换两个类时将transition添加到.fa-chevron-right或.fa-chevron-left中?

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

CSS过渡是为了改变CSS属性(想想background-color或width)。你的css类只是简单地改变渲染的图像，实际上并没有改变任何css样式。CSS transition可以工作，如果你使用类似transform: rotate(0.25turn);的东西，而不是两个不同的图像。

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