我试图让我的元素留在原地（转换后）。现在，翻译后的位置就是我想要的位置，但随后我的名字又回到了引用中。我是否遗漏了一段代码，或者是否有一段代码使这种快速恢复发生？
.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>
原因及解决方法：
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 规范 - 可变形元素
- Chromium 项目 - Chrome 中的 GPU 加速渲染
- HTML5 Rocks - Chrome 中的加速渲染
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
