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

Posted 2023-03-06

【中文标题】动画过渡没有从正确的位置开始

【英文标题】：Animated transition not starting at the right position

【发布时间】：2013-01-11 03:40:35

【问题描述】：

我正在开发一个带有打结绳状栏的网站，该栏会展开以显示有关悬停的更多信息，但我在让动画看起来正确时遇到问题。 （这是一个临时链接：http://couchcreative.co/tcc/）。

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

抱歉，如果我没有正确解释这一点，但希望当您访问该网站时，您会明白我所说的动画看起来有点……关闭的意思。感谢您的帮助！

【参考方案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;

【讨论】：

完美，感谢您的帮助。我从另一个站点借用了代码，并希望在重构它之前先让它工作，但我一定是把自己编码到了一个角落。再次感谢！