为什么我的变换会回来？ [英] Why does my Transform snap back?
问题描述
我试图让我的元素留在现场（过渡后）。现在，翻译的位置是我想要的地方，但然后我的名字回到报价。
Am trying to make my element stay in spot (after the transition). Right now, the translated location is where I want it but then my name snaps back onto the quote. Am I missing a piece of code or is there a piece of code that's making this snap back happen?
.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转换一般不能应用于具有 ：inline 设置。虽然很奇怪， transform 确实似乎在回弹之前首先发生，但是解决方案是将设置更改为 display：inline-block ，如下面的代码段所示。
CSS Transforms generally cannot be applied to elements that have display: inline setting. While it is strange that the transform does seem to happen initially before snapping back, the solution would be to change the setting to display: inline-block like in the below snippet.
.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>
如果元素不可转换，为什么最初转换元素？
浏览器的行为）似乎很奇怪，我只能认为这是一个错误，但很可能是因为浏览器中的加速渲染，以及层被创建和移动以提供更高的性能。
The behavior of browsers (atleast Chrome) seems to be strange and I can only think it is a bug but it is very likely that this behavior is due to accelerated rendering in browsers and the way layers are created and moved around to provide higher performance.
在现代浏览器中，只要某个标准与渲染对象（DOM节点）匹配，并且动画/转换变换是其中之一，就会创建合成图层（请参阅参考文献）。现在，当这种情况发生时，GPU通过改变其合成属性仅将变换应用于合成层。这个（由于某种原因我不知道）似乎不考虑元素上的显示设置，因此元素/图层被翻译。
In modern browsers, a compositing layer is created whenever a certain criteria is matched by the render objects (the DOM nodes) and having an animated/transitioned transform is one of them (refer the article mentioned in references). Now when this happens, the GPU applies the transformation only to the compositing layer by changing its composited attributes. This (for some reason unknown to me) doesn't seem to take the display setting on the element into consideration and so the element/layer gets translated.
然而，在转换的开头和结尾，浏览器重新绘制整个页面，因为不需要额外的合成层 transition 完成，这个重绘似乎把元素放回原来的位置。
However at the beginning and the end of the transition, browser repaints the entire page because there is no need of an extra compositing layer once the transition is complete and this repaint seems to put the element back into its original place.
我使用 span 标签上的转换创建的简单代码片段来说明我上面的观点。从Chrome开发工具中启用显示绘制矩形和显示合成图层边框选项（请参阅参考项3了解如何启用这些设置），然后运行代码段。您将注意到，最初当 hover 在 body 和转换即将开始，油漆发生（屏幕上的绿色或红色闪烁）以创建合成图层。一旦这个过程完成，你会注意到橙色边框应用到 span 标签。这是合成层，您将看到当转换发生时，该层如何移动。最后，另一个重绘是删除层（因为它不再需要），这将元素放回到正确的位置，根据规格。
Below is a very simple snippet that I have created with transforms on span tag to illustrate my point above. Run the snippet after enabling "Show paint rectangles" and "Show composited layer borders" options from Chrome Dev tools (check reference item 3 for how to enable these settings). You will note that initially when you hover anywhere on body and the transition is about to start, a paint happens (green or red blink on screen) to create the compositing layers. Once this process is done, you will note an orange border getting applied to the span tag. This is the compositing layer and you will see how only this layer moves when the transition happens. At the end another repaint happens to remove the layers (as it is no longer required) and this puts the element back into its correct place based on specifications.
body:hover span {
transition: all 1s 1s;
transform: translateX(200px);
}
<span>abcd</span>
如前所述，权威回答为什么合成层的行为这样，但基于示例代码段和参考文章，你可以看到我的断言保持良好。
As mentioned earlier, I cannot provide an authoritative answer on why the compositing layer behaves this way but based on the sample snippet and the reference articles, you can see that my assertion holds good.
参考文献：
- W3C Spec - Transformable elements
- Chromium Projects - GPU Accelerated Rendering in Chrome
- HTML5 Rocks - Accelerated Rendering in Chrome
这篇关于为什么我的变换会回来？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
