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;