左侧 - >右侧和顶部 - >底部位置之间的CSS过渡

Question

是否可以使用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;
}

然后我使用jQuery .addClass

Answer 1

如果您知道动画元素的宽度/高度,则可以为位置(顶部,底部,左侧,右侧)设置动画,然后减去相应的边距.

?.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*/
}

然后根据位置动画...

.animate.move {
  left: 100%;   /*or bottom, top, right*/
  margin-left: -100px; /*or bottom, top, right */
}

这个实现可能会更顺畅,transform: translate(x,y)但我会保持这样,所以它更容易理解.

演示:http://jsfiddle.net/nKtC6/

Answer 2

这在Chromium上对我有用.translate的%是指应用它的元素的边界框的大小,因此它完美地将元素提供到右下边缘,而不必切换使用哪个属性来指定它的位置.

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}

Answer 3

在更现代的浏览器（包括 IE 10+）中，您现在可以使用calc()：

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}

Answer 4

对于具有动态宽度的元素，可以使用transform: translateX(-100%);来计算水平百分比值。这导致了两种可能的解决方案：

1. 选项：在整个视口中移动元素：

过渡自：

transform: translateX(0);

到

transform: translateX(calc(100vw - 100%));

transform: translateX(0);

transform: translateX(calc(100vw - 100%));

2. 选项：移动父容器中的元素：

过渡自：

transform: translateX(0);
left: 0;

到

left: 100%;
transform: translateX(-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>

Codepen 上的演示

注意：这种方法可以很容易地扩展到垂直定位。在这里访问示例。