动画过渡不是从正确的位置开始

Question

我正在使用一个打结的绳索式栏杆进行扩展，以显示有关悬停的更多信息，而且我遇到了让动画看起来正确的问题。 （这是一个临时链接：http://couchcreative.co/tcc/）。

目前，第一步的条形将向下移动到框的底部，然后向下移动到新的位置，而我希望它在悬停时向上移动到新的位置，而不是从底部开始悬停框。任何人都可以帮助解释为什么会这样吗？相关的CSS以“.look”类开头。

道歉，如果我没有解释这一点，但希望当你访问该网站时，你会看到我对动画看起来有点......的意思。谢谢你的帮助！

Answer 1

我会重新设计你的HTML结构，使其更具语义性和重复性。

演示：http://jsfiddle.net/krmn4/5/

HTML：

<a href="/testicularcancer/" class="look">
    <figure><img src="http://couchcreative.co/tcc/img/look.png" /></figure>
    <div class="bar"></div>
    <div class="off">
        <h4>Look</h4>
    </div>
    <div class="on">
        <h4>Relax your scrotum.</h4>
        <p>Check your testicles just after you’ve had a bath or shower, when the muscles in the scrotum are relaxed, making it easier for you to feel any lumps, growths or tenderness. Stand in front of the mirror. Look for any swelling on the skin of your scrotum.</p>
        <span>Learn More</span>
    </div>
</a>

CSS：

.look {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 235px;
    overflow: hidden;

    /* optional styling */
    color: #000;
    text-align: center;
    text-decoration: none;
}
.look h4 {
    /* optional styling */
    line-height: 48px;
    font-size: 20px;
    font-weight: bold;
}

.look .bar {
    height: 48px;
    background: url(http://couchcreative.co/tcc/img/step_1.png) 0 0 repeat-x;
    margin: -24px 0 0; /* half of height */

    /* necessary so figure img doesn't overlap */
    position: relative;
    z-index: 1;
}
.look figure,
.look .off,
.look .on {
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    transition: all 300ms linear;
    height: 0;
    opacity: 0;
    overflow: hidden;
}
.look figure {
    /* optional styling */
    background-color: #b2d5e6;
    padding: 12px;
    margin: 0;
}
.look .off {
    height: 48px;
    opacity: 1;
}

/* hover state */
.look:hover .off {
    height: 0;
    opacity: 0;
}
.look:hover figure {
    height: 120px; /* or however tall it needs to be */
    opacity: 1;
}
.look:hover .on {
    height: 220px; /* or however tall it needs to be */
    opacity: 1;
}