这是显示预期行为的最小示例.它的工作原理,但由于某些原因,背后的意见属性必须是不同的.否则(例如两者都具有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;
}
题
解决方法
我已经做了一个简单的例子的新片段：
#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将不会启动新的转换.
老回答
规范的关键部分是这一个：(强调我的)
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>
