CSS过渡的中断不适用于相同的属性值

我有 answered a question在悬停子元素时如何启动动画,然后保留应用的样式,直到不要悬停父项.但是,我发现在我提出的解决方案中的一个行为,我无法解释,我想明白.阅读 specification的相关部分没有帮助我.

这是显示预期行为的最小示例.它的工作原理,但由于某些原因,背后的意见属性必须是不同的.否则(例如两者都具有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>

一个小观察

相关浏览器是Firefox和Chrome.在Firefox中,以下工作如下：

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

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

题

为什么width属性的值必须有所不同才能使不起到悬停效果像预期的那样工作？

解决方法

对不起 – 我错过了在yopur问题发生了什么.

我已经做了一个简单的例子的新片段：

#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上,然后(在转换结束之前)悬停B.您将看到相同的行为：转换不变.

原因是当悬停a时,width(作为元素的属性)为0px. (不是计算的宽度,正在转换).
所以,当你将鼠标悬停在B上时,0px的新风格不会触发一个属性的变化,而hende将不会启动新的转换.

老回答

规范的关键部分是这一个：(强调我的)

reversing transitions spec

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): […]

所以,当新的宽度与旧版本相同时,不是这个悬停的效果并不是没有影响,所以效果非常慢(600s),因为浏览器正在反转正在运行的转换.

为了证明这一点,我设置了一个片段,其中最后一个规则的宽度是相同的(10px).
延迟设置为10秒.

将小孩移开,将其移开,离开父母.你会看到10秒钟后,孩子的宽度被修改.

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

原文地址：https://www.jb51.cc/css/214569.html