CSS过渡的中断不适用于相同的属性值 [英] Interruption of a CSS transition does not work for same attribute value

问题描述

我已经回答了一个问题有关在悬停子元素时如何开始动画然后保留所应用样式的问题直到将鼠标悬停为止。但是，我在提出的解决方案中发现了一种我无法解释且希望了解的行为。读规范的相关部分对我没有帮助。

I've answered a question on how to start an animation when hovering the child element and then preserve the applied style until un-hovering the parent. However, I discovered a behaviour in my proposed solution that I can't explain and that I would like to understand. Reading the relevant parts of the specification didn't help me.

以下是显示预期行为的最小示例。它可以工作，但是由于某些原因，带有注释的属性必须有所不同。否则（例如，两者都具有10px的值），将父级悬停将不会对子级的宽度产生任何影响。 JSFiddle 。

Here is a minimal example showing the expected behaviour. It works but the properties with comments behind have to be different for some reasons. Otherwise (e.g. both having 10px as value) un-hovering of the parent won't do anything to the width of the child. 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>

相关的浏览器是Firefox和Chrome。在Firefox中，其工作原理如下：

Relevant browsers are Firefox and Chrome. In Firefox the following works:

.parent .child {
  /* ... */
  transition: width 0.5s ease 600s;
  width: calc(10px);
}

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

问题

为什么必须使width属性的值不同才能使悬停效果按预期工作？

Question

Why do the values of the width property have to differ in order to make the un-hover effect work like expected?

推荐答案

对不起-我误解了yopur问题中发生的事情。

Sorry - I missunderstood what was happening in yopur question.

我用一个简化的案例制作了一个新代码段：

I have done a new snippet with a simplified case:

#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>

将鼠标悬停在A上，然后（之前

Hover on A, and then (before the transition ends) hover B. You will see the same behaviour: the transition goes on unchanged.

原因是当悬停a时，宽度（作为元素的属性）为0像素。 （不是正在转换的计算的宽度）。
因此，当您将鼠标悬停在B上时，新样式0px不会触发属性更改，并且hende不会开始新的过渡。

The reason is that when hovering a, the width (as a property of the element) is 0px. (Not the calculated width, that is being transitioned). So, when you hover on B, and the new style of 0px will not trigger a property a change, and hende will not start a new transition.

规格的关键部分是这个：（强调我的）

The key part of the specs is this one: (emphasis mine)

反转转换规范

为了满足这个期望，当开始转换时对于具有当前正在运行的过渡（其可逆调整后的起始值与新过渡的终值相同）的元素（以下称为新过渡）的属性），实现必须取消旧的过渡并按如下方式调整新的过渡（在遵循计算合并持续时间，开始时间和结束时间的规则之前）：[...]

To meet this expectation, when a transition is started for a property on an element (henceforth, the new transition) that has a currently-running transition whose reversing-adjusted start value is the same as the end value of the new transition (henceforth, the old transition), implementations must cancel the old transition [...] and adjust the new transition as follows (prior to following the rules for computing the combined duration, start time, and end time): [...]

因此，当新宽度与旧宽度相同时，取消悬停并不是真的没有效果，因为浏览器正在反转正在运行的过渡时，效果非常很慢（600秒）。

So, when the new width is the same as the old one, it's not really that the un-hover has no effect, it's that the effect is very slow (600s) as the browser is reversing the transition that was running.

为了证明这一点，我设置了一个代码段最后一条规则中的宽度相同（10像素）。
并将延迟设置为10秒。

To prove this, I have set a snippet where the width in the last rule is the same (10px). And the delay is set to 10 seconds.

将孩子悬停，然后将其悬停在父母之外。您将看到10秒钟后，子宽度被修改。

Hover the child, and unhover it leaving the parent. You will see that 10 seconds later, the child width is modified.

.parent {
  border: 1px solid orange;
  padding: 20px;
  width: 400px;
}

.parent .child {
  display: inline-block;
  height: 40px;
  background: blue;
  
  transition: width 0.5s ease 10s;
  width: 10px;
}

.parent .child:hover {
  transition-delay: 0s;
  width: 100px;
}

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

<div class="parent">
  <div class="child">
  </div>
</div>

这篇关于CSS过渡的中断不适用于相同的属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！