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样式。如果你使用像transition这样的东西而不是两个不同的图像，那么CSS 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>

关于在Toggeling中向两类添加转换的问题

1 个答案: