悬停时淡出动态内容

Question

http://jsfiddle.net/meh/mL2qa7n3/1/

我有两个灵活的框，它们在悬停时更改了flex grow属性。我成功地创建了一个.bfore和.fafter，其中一个在不悬停时可见，另一个在悬停时可见。

正如你在小提琴中看到的那样，内容在没有任何过渡的情况下瞬间切换。这与柔性盒子的过渡形成了鲜明的对比，给人一种糟糕的用户体验。

我希望内容在悬停5秒左右时淡出。

<div id="firstContainer">
<div class="first" id="firstLeft">
    <p class="before">Before</p>
    <p class="after">After</p>
</div>
<div class="first" id="firstRight"></div>

    #firstContainer {
    display: flex;
    flex: 0 1 auto;
    flex-flow: no-wrap row; 
    height: 300px;
}
.first {
    border: medium black solid;
    margin-right: 16px; margin-left: 0;
    -webkit-transition-property: flex-grow; /* Safari */
    -webkit-transition-duration: 1.5s; /* Safari */
    transition-property: flex-grow;
    transition-duration: 1.5s;
    padding: 10px 20px;
}
.first:hover > .after {
    display: inline-block;
}
.first:hover > .before {
    display: none;  
}
.first:first-child {
    border-left: none;  
}
.first:last-child {
    margin-right: 0;
    border-right: none;
}
#firstLeft {
    flex-grow: 2;   
}
#firstRight {
    flex-grow: 2;
}
#firstRight:hover, #firstLeft:hover {
    flex-grow: 3;   
}
.after {
    display: none;    
}
.before {
    text-align: center;
    margin: auto;
    width: 40%; height: 100%;
    border-top: medium black solid;
    border-bottom: medium black solid;
    padding: 10px 20px;
    box-sizing: border-box;
}

Answer 1

您可以在内容之前和之后播放不透明度转换。你需要转换为悬停在上和悬停关闭

.before {
    opacity: 1;
    transition: opacity 2.5s ease-in-out 2.5s;
}
.after {
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
}
.first:hover > .before {
    opacity: 0; 
    transition: opacity 2.5s ease-in-out;
}
.first:hover > .after {
    opacity 1;
    transition: opacity 2.5s ease-in-out 2.5s;
}

我更新了你的jsfiddlehttp://jsfiddle.net/yk9ph11x/.关心div内部的内容，您可能应该添加visibility:hidden或在隐藏内容上使用z-index，以避免隐藏内容的内容选择。