замирания динамического контента по наведению

Question

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

У меня есть две гибкие коробки, которые меняют свой гибкий вырастали атрибут при наведении курсора мыши. Мне удалось создать .before и .after, один из которых виден, когда не зависает, а другой видимый при паре.

Как вы можете видеть в скрипке, контент мгновенно переключается без какого-либо перехода. Это резко контрастирует с переходом гибких ящиков, что дает плохой UX.

Я хочу, чтобы контент исчезал при наведении курсора примерно на 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; 
} 

Я обновил свой jsfiddle http://jsfiddle.net/yk9ph11x/. Позаботьтесь о содержании внутри div, вы, вероятно, должны добавить видимость: скрывать или играть с z-index на скрытом контенте, чтобы избежать выбора содержимого скрытого контента.