悬停时淡化动态内容

Question

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

我有两个灵活的盒子，它们在悬停时改变它们的 flex-grow 属性。我设法创建了一个 .before 和 .after，其中一个在不悬停时可见，另一个在悬停时可见。

正如您在小提琴中看到的那样，内容会立即切换，没有任何过渡。这与弹性盒子的过渡形成鲜明对比，给人一种糟糕的用户体验。

我希望内容在悬停大约 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 和 .after 内容上使用不透明度过渡。 您需要过渡以进行悬停和悬停

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

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