關於在Toggeling上添加轉換到兩個類的問題

您可以看看這個演示，並讓我知道爲什麼我無法在切換兩個類時將transition添加到.fa-chevron-right或.fa-chevron-left中的每一個？關於在Toggeling上添加轉換到兩個類的問題

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

來源

2016-11-16 user1760110

CSS過渡是用於改變CSS特性（認爲background-color或width）。你的CSS類只是改變渲染的圖像，而不是實際改變任何CSS樣式。如果您使用類似transform: rotate(0.25turn);而不是兩個不同的圖像，CSS transition會起作用。

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

來源

2016-11-16 22:15:47

關於在Toggeling上添加轉換到兩個類的問題

回答

相關問題