左边的CSS过渡 - ＆gt;右和上 - ＆gt;底部位置

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

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

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

转换自：

transform: translateX(0);

到

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。选项：在父容器中移动元素：

转换自：

transform: translateX(0);
left: 0;

到

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>

---

Codepen上的演示

注意：可以轻松扩展此方法以进行垂直定位。访问示例here。

Answer 4

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

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