css - 动画过渡没有从正确的位置开始

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;
}