悬停时淡化动态内容

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