如何添加CSS3動畫到一個按鈕，當其圖標更改

我想爲一個按鈕的CSS過渡時，按鈕內的字體真棒圖標更改，即使用jQuery一個圖標替換爲另一個。如何添加CSS3動畫到一個按鈕，當其圖標更改

爲了給更好地理解這一點，這是我的HTML：

 <button type="button" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <i class="fa fa-navicon fa-lg"></i> 
    </button>

jQuery的，它取代了圖標：

$(".navbar-toggle").on("click", function() { 
     $(this).toggleClass("active"); 
     $('body').toggleClass("navbar-is-active"); 
     $('.navbar-toggle i').toggleClass('fa-navicon'); 
     $('.navbar-toggle i').toggleClass('fa-remove'); 
    });

的按鈕和CSS過渡的CSS樣式：

.navbar-toggle { 
    width: 81px; 
    height: 80px; 
    background: #c4414f!important; 
    border-radius: 0; 
    border: 0 none; 
    margin: 0; 
    padding-left: 29px; 
    z-index: 2000; 
} 

.navbar-default .navbar-toggle .icon-bar { 
     background-color: #FFF; 
     height: 3px; 
     border-radius: 0; 
    } 
    .navbar-toggle.active { 
     -webkit-box-shadow:inset 1px 1px 1px 1px #000000; 
     box-shadow: -1px 1px 1px 0px #333333; 
    } 

.navbar-toggle { 
    color: #FFF; 
    padding-left: 10px; 
} 
    .navbar-toggle i { 
     font-size: 24px; 
     -webkit-transition: all 0.5s; 
     transition: all 0.5s; 
    }

但是，當菜單圖標更改爲「X」時，按鈕無法工作。我究竟做錯了什麼？我已經做了小提琴：

https://jsfiddle.net/471L8dfd/

按照要求，轉變我期待添加到導航按鈕的類型的例子：

來源

2015-11-07 Alex Zahir

您想讓動畫做什麼？ – mpallansch

對於您切換的任何類，您沒有任何特定的CSS，因此沒有太多要轉換。 – GolezTrol

是的，就是這樣。基本上當導航欄圖標發生變化時，我希望它具有漸變效果，例如淡入淡出效果。 –

使用fadeOut和fadeIn功能會訣竅：

$(".navbar-toggle").on("click", function() { 
    $(this).toggleClass("active"); 
    $('body').toggleClass("navbar-is-active"); 
    $('.navbar-toggle i').fadeOut(100, function(){ 
     $(this).toggleClass('fa-navicon'); 
    }) 
    $('.navbar-toggle i').toggleClass('fa-remove').fadeIn(150); 
});

https://jsfiddle.net/471L8dfd/3/

編輯：注意，類fadeOut後切換是爲了防止圖標爆裂並且第一動畫速度（100毫秒處）屬於當前圖標fadeOut和第二至下一個圖標fadeIn。您的總動畫速度是合併的這兩個值（100 + 150 = 250ms）

來源

2015-11-07 20:16:24

我剛剛編輯了我的問題並提供了一個示例。你的回答是好的，它有可能更接近所提供的例子嗎？謝謝 –

您的意思是在轉換速度或過渡方面（如線性，緩解......）？ –

以下是一些可編輯變量的更新。 https://jsfiddle.net/471L8dfd/4/ –

如何添加CSS3動畫到一個按鈕，當其圖標更改

回答

相關問題