是否总是在新值之前应用新的过渡？

Question

假设我正在使用transition，以便在悬停时平滑更改元素的位置。我还更改transition本身的值以在每个方向上实现不同的动画。

似乎当我将鼠标移到元素上时，new transition值用于“前进”过渡，而当我将鼠标悬停时，将old值用于“反向”过渡。

我找不到关于此的很多文档。可以保证订单吗？

div {
  background: red;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  left: 0px;
  transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
  top: 150px;
  left: 400px;
  transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; }
div:nth-child(3) { transition-delay: 0.2s; }
div:nth-child(4) { transition-delay: 0.3s; }

Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>

Answer 1

[...]当我将鼠标悬停在元素上时，所有3个属性都会更改其值，并且直观上不清楚更改的应用顺序，至少是来自诸如Core Animation之类的框架的背景经验，其中“模型” “表示”层和“表示”层是分开的东西，并且在动画开始运行之前设置了动画的参数。我认为您的回答是有道理的...

[我认为这里的主要区别在于，从“元素开始/不悬停时开始动画”的角度来考虑过渡是错误的思考方式。

是的，您习惯的范例（MVC范例）实际上不适用于CSS。至少不会影响您作为CSS“编写者”的水平。顺便说一下，与此相关的规范是CSS Transitions

在CSS中，对CSS属性的更改将立即应用。过渡允许您在一段时间内将更改应用于值。对于您的情况，您有四个div，它们都设置为距屏幕顶部30像素和距屏幕左侧0像素。

悬停时，多亏了您的:hover div选择器，新样式才适用。通常，它们会立即应用，但是由于您给了它们一个过渡，因此过渡会持续一段时间。由于您还给了其中一些transition-delay，因此您可以看到每个动作。为了更易于查看，我将每个div的颜色更改为唯一。应该很清楚哪些先走。

[一旦您移开鼠标，:hover伪类将不再适用，因此将重新应用div下的样式。再次，它们将立即应用，但是您设置的transition（以及transition-delay on 3 of the 4 divs) changes that to occur over a longer duration. So, just as when the：hover`样式适用，红色div首先移动，然后其他每个增加0.1s延迟之后移动。

div {
  background: red;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  left: 0px;
  transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
  top: 150px;
  left: 400px;
  transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; background: blue; }
div:nth-child(3) { transition-delay: 0.2s; background: green; }
div:nth-child(4) { transition-delay: 0.3s; background: yellow; }

Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>