为什么我的转换会回弹？

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>

如前所述,我无法提供关于合成层为何如此行为的权威答案,但基于示例代码段和参考文章,您可以看到我的断言保持良好.

参考文献:

• W3C Spec - 可变形元素
• Chromium项目 - Chrome中的GPU加速渲染
• HTML5 Rocks - Chrome中的加速渲染