ответил на вопрос о том, как начать анимацию при наведении дочернего элемента, а затем сохранить применяемый стиль до тех пор, пока не будет парировать родителя. Тем не менее, я обнаружил поведение в своем предлагаемом решении, которое я не могу объяснить, и что я хотел бы понять. Чтение соответствующих частей спецификация не помогло мне.
Вот минимальный пример, показывающий ожидаемое поведение. Это работает, но свойства с комментариями позади должны быть разными по некоторым причинам. В противном случае (например, оба значения 10px в качестве значения), не зависящие от родителя, не будут делать ничего с шириной дочернего элемента. JSFiddle.
.parent {
border: 1px solid orange;
padding: 20px;
width: 400px;
}
.parent .child {
display: inline-block;
height: 40px;
background: blue;
transition: width 0.5s ease 600s;
width: 10px; /* why does this value has to be different ... */
/* Hint:
If you hover the child until it reaches the 100px, then hover the
parent without leaving the parent and keeping that hover for the
transition-delay (600s) the width will become 10px as defined here.
And removing this width property here won't make the transition work
at all. */
}
.parent .child:hover {
transition-delay: 0s;
width: 100px;
}
.parent:not(:hover) .child {
transition: width 0.5s ease 0s;
width: 11px; /* ... from this value? */
/* Hint:
This is used as some kind of interruption of the 600s
transition-delay in order to achieve the parent un-hover effect.
I would like to set the width to 10px here as well but this will
result in having no effect on the width of the enlarged child when
un-hovering the parent. */
}
<div class="parent">
<div class="child">
</div>
</div>