左侧 -> 右侧和顶部 -> 底部位置之间的 CSS 转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10247255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS transition between left -> right and top -> bottom positions
提问by grep
Is it possible to use CSS transitions to animate something between a position set as left: 0pxto right: 0pxso it goes all the way across the screen? I need to accomplish the same thing with top to bottom. Am I stuck calculating the screen width / object-size?
是否可以使用 CSS 过渡在设置的位置之间设置动画left: 0px，right: 0px以便它一直穿过屏幕？我需要从上到下完成同样的事情。我是否卡在计算屏幕宽度/对象大小？
#nav {
position: absolute;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
-webkit-transition: all 0.5s ease-out;
}
.moveto {
top: 0px;
right: 0px;
}
and then I use jQuery's .addClass
然后我使用jQuery的 .addClass
回答by methodofaction
If you know the width/height of the animated element you can animate the position (top, bottom, left, right) and then substract the corresponding margin.
如果您知道动画元素的宽度/高度，您可以对位置（顶部、底部、左侧、右侧）进行动画处理，然后减去相应的边距。
?.animate {
height: 100px;
width: 100px;
background-color: #c00;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
position: absolute;
left: 0; /*or bottom, top, right*/
}
And then animate depending on the position...
然后根据位置设置动画...
.animate.move {
left: 100%; /*or bottom, top, right*/
margin-left: -100px; /*or bottom, top, right */
}
This implementation would probably be smoother with transform: translate(x,y)but I'll keep it like this so it's more understandable.
这个实现可能会更顺畅，transform: translate(x,y)但我会保持这样，所以它更容易理解。
回答by teknotus
This worked for me on Chromium. The % for translate is in reference to the size of the bounding box of the element it is applied to so it perfectly gets the element to the lower right edge while not having to switch which property is used to specify it's location.
这在 Chromium 上对我有用。translate 的 % 是参考它所应用到的元素的边界框的大小，因此它可以完美地将元素置于右下边缘，而不必切换使用哪个属性来指定它的位置。
topleft {
top: 0%;
left: 0%;
}
bottomright {
top: 100%;
left: 100%;
-webkit-transform: translate(-100%,-100%);
}
回答by candu
回答by Robbendebiene
For elements with dynamic widthit's possible to use transform: translateX(-100%);to counter the horizontal percentage value. This leads to two possible solutions:
对于具有动态宽度的元素，可以使用transform: translateX(-100%);来计算水平百分比值。这导致了两种可能的解决方案：
1. Option: moving the element in the entire viewport:
1. 选项：在整个视口中移动元素：
Transition from:
过渡自：
transform: translateX(0);
to
到
transform: translateX(calc(100vw - 100%));
#viewportPendulum {
position: fixed;
left: 0;
top: 0;
animation: 2s ease-in-out infinite alternate swingViewport;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
@keyframes swingViewport {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(100vw - 100%));
}
}<div id="viewportPendulum">Viewport</div>2. Option: moving the element in the parent container:
2. 选项：移动父容器中的元素：
Transition from:
过渡自：
transform: translateX(0);
left: 0;
to
到
left: 100%;
transform: translateX(-100%);
#parentPendulum {
position: relative;
display: inline-block;
animation: 2s ease-in-out infinite alternate swingParent;
/* just for styling purposes */
background: #c70039;
padding: 1rem;
color: #fff;
font-family: sans-serif;
}
@keyframes swingParent {
from {
transform: translateX(0);
left: 0;
}
to {
left: 100%;
transform: translateX(-100%);
}
}
.wrapper {
padding: 2rem 0;
margin: 2rem 15%;
background: #eee;
}<div class="wrapper">
<div id="parentPendulum">Parent</div>
</div>Demo on Codepen
Codepen 上的演示
Note:This approach can easily be extended to work for vertical positioning. Visit example here.
注意：这种方法可以很容易地扩展到垂直定位。在这里访问示例。
