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;