我有過渡問題在CSS它不能在菜單欄中平穩移動？

Question

我有問題在CSS中，它不能在菜單欄中平穩移動，此鏈接中的菜單任何人都可以幫助我謝謝。

這裏是鏈接jsfiddle。

我嘗試這一點，但沒有什麼工作：

.div-move{ 
    -webkit-transition: width 1s ease-in-out; 
    -moz-transition: width 1s ease-in-out; 
    -o-transition: width 1s ease-in-out; 
    transition: width 1s ease-in-out; 
} 

Answer 1

您不能過渡到寬度：自動，但通過使用最大寬度自動使用您的文本的大小。只要確保：懸停寬度比您使用的文本長，因此它將全部出現。此外，我建議在懸停和常規課程上使用轉換，以便在鼠標離開菜單時也可以進行轉換。嘗試改變這些類：

.text-header-move{ 
    max-width: 0px; 
    float: right; 
    overflow: hidden;  
    -webkit-transition: max-width 1s ease-in-out; 
    -moz-transition: max-width 1s ease-in-out; 
    -o-transition: max-width 1s ease-in-out; 
    transition: max-width 1s ease-in-out; 
} 
.notification-bar:hover .text-header-move{ 
    max-width:400px; 
    -webkit-transition: max-width 1s ease-in-out; 
    -moz-transition: max-width 1s ease-in-out; 
    -o-transition: max-width 1s ease-in-out; 
    transition: max-width 1s ease-in-out;  
} 

Answer 2

要轉換到，這是其中一個問題是「自動」的價值。

.notification-bar:hover .text-header-move{ 
    width:auto; 
} 

在這個小提琴看看： http://jsfiddle.net/herrfischerhamburg/jok48kpz/2/

我更新了搗鼓「最大寬度」的工作，我認爲這是對你比固定寬度的更好的解決方案。