CSS Transition 在 :hover exit 上发送 Div 下面的内容

Question

当用户将鼠标悬停在 item 上时，我有 css 转换工作，但是当鼠标退出 div 时，内容在转换期间被推到下面。下面是我的 html/css 以及一个 jsfiddle 来展示我的意思。

html:

<div id="container">
    <div class="item">
        <div class="img">
        </div>
        <div class="heading">
        </div>
    </div>
</div>

CSS:

#container {
    width: 100%;
    height: 100%;
}

.item {
    width: 100%;
    height: 400px;
    position: relative;
}

.img {
    background: #000;
    width: 40%;
    height: 400px;
    float: left;
    transition: width 0.5s ease;
}

.heading {
    width: 60%;
    height: 400px;
    float: right;
    background: #900;
    transition: width 0.5s ease;
}

.item:hover .img {
    width: 100%;
}

.item:hover .heading {
    width: 100%;
    background:rgba(255,255,255, 0.9);
    position: absolute;
    top:0;
    left:0;
}

JSFiddle

我确信这是一个简单的位置问题。但是，我对 transition 不够熟悉，不知道在哪里可以找到答案。

更新位置为

tranform: translateY(-100%);

为了摆脱非过渡属性。现在，在 :hover 之前/之后，div heading 被推到 item 下方。更新了 JSFiddle 以显示。

已更新 transition: all 到 img 和 heading 上的 transition: width > 修复了 heading 在 :hover 时被推到 img 下面的问题，但是 heading 被推到下面的原始问题是用户退出 :hover 仍然是一个问题。

Answer 1

我想我找到了答案:

通过制作heading有position:absolute; , 我可以让它被迫留在 item 内div ，防止它在它下面移动。所以我更新后的 css(带有实际的 class 名称和生产内容)看起来像；

.flight {
    height: 400px;
    position: relative;

}

.flight-img {
    background: red;
    background-size: cover;
    width: 40%;
    height: 400px;
    float: left;
    position: relative;

    /* CSS Animation Effects */
    transition: width 0.5s ease;

}


.flight-heading {
    width: 60%;
    float: left;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);

    transition: width 0.5s ease;
}

/* Alternate img float ***
/* Probably an easier way but this works for now */
.flight:nth-of-type(4n-1) .flight-img{
float: right;
}
.flight:nth-of-type(4n-3) .flight-img{
    float: left;
}
.flight:nth-of-type(4n-1) .flight-heading{
    left:0;
}
.flight:nth-of-type(4n-3) .flight-heading{
    float: right;
}

/* Adding hover effects for desktop */

.flight:hover .flight-img {
    width: 100%;
}

.flight:hover .flight-heading {
    width: 100%;
    position:absolute;
    top:0;
    left:0;
    transform: translateY(50%);
    background: rgba(0,0,0,0.75);
    color: #fff;

    h2 {
        color: #fff;
    }
}

虽然我的 html 看起来像:

<div id="flights">
    <div class="flight">
        <div class="flight-img"></div>
        <div class="flight-heading">
            <h2>Shared Flights</h2>
            <p>The shared flight option is available for 1 to 5 people. This is our most economical flight. You will fly with other passengers that are booked that day.</p>
            <button>Book Now</button>
        </div>
    </div>
    <div class="clear"></div>

</div><!-- End Flights -->

带有 JSFiddle以显示。我知道动画需要工作，但我认为现在 divs 让它变得流畅会很容易留在一个地方。