CSS轉換時機問題

Question

我正試圖重新創建這裏看到的轉換 - http://piccsy.com/investors - 它是在鼠標懸停上移動的頁面右側的橫幅。它說「執行摘要」。

這是我到目前爲止。我很接近，但似乎可以讓它完全相同。出於某種原因，容器內的文本移動起伏不平，不像光滑的容器。

http://jsfiddle.net/fuwLeye0/

<div id="executive-summary-bar" style="text-align: center;"> 
<a href="#executive-summary">Executive Summary </a></div> 

#executive-summary-bar a{color:#ffffff; height:20px; margin-top:-5px;}  
#executive-summary-bar a:hover{color:#ffffff;} 

#executive-summary-bar { 
    height:20px; 
    line-height: 1.2; 
    background: none repeat scroll 0 0 #373435; 
    color: #ffffff; 
    font-size: 0.8em; 
    margin-top: -10px; 
    padding: 32px 3px 7px; 
    position: absolute; 
    text-align: center; 
    top: 0; 
    width: 68px; 
    transition: height 1s; 
    -moz-transition: height 1s; /* Firefox 4 */ 
    -webkit-transition: height 1s; /* Safari and Chrome */ 
    -o-transition: height 1s; /* Opera */ 
    -ms-transition: height 1s; /* IE9 (maybe) */ 
}  
#executive-summary-bar:hover{ 
    height:35px; 
    padding: 46px 3px 7px; 
}  
#executive-summary-bar:after{ 
    border-left: 37px solid transparent; 
    border-right: 37px solid transparent; 
    border-top: 36px solid #373435; 
    content: ""; 
    left:0; 
    position: absolute; 
    top:100%; 
    width: 0; 
} 

div#executive-summary-bar { 
    //right: 50px; 
    //top: -40px; 
} 

Answer 1

文本位置的<div/>內由padding-top控制，但你只是動畫height。如果您將padding-top添加到您的過渡聲明you get the desired effect。

transition: height 1s, padding-top 1s;