为什么我的变换会突然弹回？

Question

我正在尝试使我的元素保持原状（过渡之后）。现在，翻译后的位置是我想要的位置，但随后我的名字又回到了报价单上。我是否缺少一段代码，或者是否有一段代码使这种回弹发生？

.blockquote {

  font-family: "Open Sans", Verdana, Arial, sans-serif;

  font-size: 30px;

  line-height: 60px;

  width: 100%;

  background-color: rgba(0, 0, 0, 0.16);

  /*rgba(192, 241, 247, 0.15);*/

  height: 100px;

  text-align: center;

  padding-top: 40px;

  color: white;

  font-weight: 300;

  font-style: italic;

  transition: all 250ms ease-in-out;

}

.blockquote .blockquote2 {

  transition: all 250ms ease-in-out;

  font-size: 25px;

  line-height: 35px;

  width: 90%;

}

.blockquote .author {

  display: inline;

  margin-left: -150px;

  transition: all 250ms ease-in-out;

  font-family: "Roboto", sans-serif;

  color: #838eca;

  text-transform: uppercase;

  font-size: 20px;

  letter-spacing: 2px;

  line-height: 35px;

  opacity: 0;

}

.blockquote:hover .blockquote2 {

  transform: translateX(-20px);

  transition: all 250ms ease-in-out;

}

.blockquote:hover .author {

  opacity: 1;

  font-weight: 900;

  color: rgb(25, 137, 228);

  transform: translateX(200px);

  transition: all 250ms ease-in-out;

}


<div class="blockquote">

  <div class="blockquote2"> <b>雕刻</b>自己的路

    <p class="author">- Jason Zhang</p>

  </div>

</div>

Answer 1

原因和解决方法：

CSS转换通常不能应用于具有display: inline设置的元素。虽然奇怪的是，这种transform情况似乎最初发生在回弹之前，但解决方案是将设置更改display: inline- block为下面的代码段所示。

.blockquote {

  font-family: "Open Sans", Verdana, Arial, sans-serif;

  font-size: 30px;

  line-height: 60px;

  width: 100%;

  background-color: rgba(0, 0, 0, 0.16);

  /*rgba(192, 241, 247, 0.15);*/

  height: 100px;

  text-align: center;

  padding-top: 40px;

  color: white;

  font-weight: 300;

  font-style: italic;

  transition: all 250ms ease-in-out;

}

.blockquote .blockquote2 {

  transition: all 250ms ease-in-out;

  font-size: 25px;

  line-height: 35px;

  width: 90%;

}

.blockquote .author {

  display: inline-block;

  margin-left: -150px;

  transition: all 250ms ease-in-out;

  font-family: "Roboto", sans-serif;

  color: #838eca;

  text-transform: uppercase;

  font-size: 20px;

  letter-spacing: 2px;

  line-height: 35px;

  opacity: 0;

}

.blockquote:hover .blockquote2 {

  transform: translateX(-20px);

  transition: all 250ms ease-in-out;

}

.blockquote:hover .author {

  opacity: 1;

  font-weight: 900;

  color: rgb(25, 137, 228);

  transform: translateX(200px);

  transition: all 250ms ease-in-out;

}


<div class="blockquote">

  <div class="blockquote2"> <b>雕刻</b>自己的路

    <p class="author">- Jason Zhang</p>

  </div>

</div>

如果元素不可变形，为什么最初会对其进行翻译？

浏览器（至少是Chrome）的行为似乎很奇怪，我只能认为这是一个错误，但是这种行为很可能是由于浏览器中的加速渲染以及创建和移动图层以提供更高性能的方式所致。

在现代浏览器中，只要渲染对象（DOM节点）满足特定条件，就会创建一个合成层，并且其中之一就是进行动画/转换转换（请参阅参考资料中提到的文章）。现在，当发生这种情况时，GPU会通过更改其复合属性将转换仅应用于复合层。这（出于某种我不知道的原因）似乎没有考虑display元素上的设置，因此元素/层得到了翻译。

但是，在的开始和结束时transition，浏览器会重新绘制整个页面，因为一旦transition完成，就不需要额外的合成层，并且此重新绘制似乎将元素放回了原始位置。

下面是我使用span标记转换创建的一个非常简单的片段，以说明我的上述观点。在启用Chrome开发工具中的“显示绘制矩形”和“显示合成层边界”选项后，运行该代码段（有关如何启用这些设置，请参见参考项目3）。您会注意到，最初，当您hover在任何地方body并且transition即将开始时，都会进行绘制（屏幕上绿色或红色闪烁）以创建合成层。完成此过程后，您会注意到橙色边框已应用于span标签。这是合成层，您将看到当transition发生。最后，又发生了一次重新绘制以删除图层（不再需要），这将根据规格将元素放回正确的位置。

body:hover span {

  transition: all 1s 1s;

  transform: translateX(200px);

}


<span>abcd</span>

如前所述，我无法提供权威的答案来说明为什么复合层会以这种方式运行，但是基于示例片段和参考文章，您可以看到我的断言成立。