Прерывание перехода CSS не работает для того же значения атрибута

ответил на вопрос о том, как начать анимацию при наведении дочернего элемента, а затем сохранить применяемый стиль до тех пор, пока не будет парировать родителя. Тем не менее, я обнаружил поведение в своем предлагаемом решении, которое я не могу объяснить, и что я хотел бы понять. Чтение соответствующих частей спецификация не помогло мне.

Вот минимальный пример, показывающий ожидаемое поведение. Это работает, но свойства с комментариями позади должны быть разными по некоторым причинам. В противном случае (например, оба значения 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>

Ответы

Ответ 1

Извините - я пропустил понимание того, что происходило в вопросе йопура.

Я сделал новый фрагмент с упрощенным примером:

#a, #b {
  width: 200px;
  height: 100px;
  border: solid 1px black;
  display: inline-block;
  background-color: lightgreen;
  margin-top: 50px;
}

#a {
  margin-right: -5px;
}

#container {
  width: 400px;
  height: 50px;
  border: solid 1px black;
  margin: 0px;
}

#child {
  width: 0px;
  height: 50px;
  position: absolute;
  background-color: blue;  
}


#child {
  transition: width 0.5s;
  width: 400px;
}

#a:hover ~ #container #child {
  transition: width 10s;
  width: 0px;
}

#b:hover ~ #container #child {
  transition: width 0.5s;
  width: 0px;
}
<div id="a">A</div>
<div id="b">B</div>
<div id="container">
  <div id="child"></div>
</div>

Ответ 2

Во-первых, я меняю transition-delay на .parent .child:

.parent .child{
    transition: width 0.5s ease 6s;
}

Это работает, и ничего не получается. Но подождите минутку!

.parent:not(:hover) .child{
    transition: width .5s ease 0s;
    width: 10px;
}

Почему свойство не работает, если свойство width 10px?

Фактически, приведенный выше код эквивалентен:

.parent:not(:hover) .child{
    transition: width .5s ease 0s;
}

Согласно спецификации, предоставленной W3,

когда начинается переход для свойства элемента (отныне нового перехода), который имеет текущий переход, чье начальное значение с поправкой на изменение совпадает с конечным значением нового перехода (отныне старый переход), реализации должны отменить старую переходную ссылку на определение выше и отрегулировать новый переход следующим образом (до следующего правила вычисления общей продолжительности, времени начала и окончания):

Итак, похоже, что свойство transition-delay должно быть от reset до 0s. Тем не менее, я думаю, что что-то упомянутое W3C вызвало событие изменения стиля:

Поскольку эта спецификация не определяет, когда происходит событие изменения стиля, и, следовательно, какие изменения в вычисленных значениях считаются одновременными, авторы должны знать, что изменение любого из свойств перехода через некоторое время после внесения изменений, которые могут произойти может привести к поведению, которое меняется между реализациями, поскольку изменения могут рассматриваться как одновременные в некоторых реализациях, но не в других.

Так как конечное значение "нового" перехода, которое мы определяем в .parent:not(:hover) .child, такое же, как в .parent .child, так называемый "новый" переход не рассматривается как новый переход браузером. В этом случае свойство transition-delay не будет reset, конечно.

Однако, если мы изменим width of .parent:not(:hover) .child, то есть изменим конечное значение перехода, мы, как полагают, определили новый переход и, согласно упомянутой выше спецификации, свойство transition-delay reset до 0s.