左侧 -> 右侧和顶部 -> 底部位置之间的 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

您可以为位置（上、下、左、右）设置动画，然后通过 CSS 转换减去元素的宽度或高度。

考虑：

$('.animate').on('click', function(){
  $(this).toggleClass("move");
})

     .animate {
        height: 100px;
        width: 100px;
        background-color: #c00;
        transition: all 1s ease;
        position: absolute;
        cursor: pointer;
        font: 13px/100px sans-serif;
        color: white;
        text-align: center;
      }

                               /* ↓ just to position things  */
      .animate.left   { left: 0;   top: 50%;  margin-top: -100px;}
      .animate.right  { right: 0;  top: 50%;  }
      .animate.top    { top: 0;    left: 50%; }
      .animate.bottom { bottom: 0; left: 50%; margin-left: -100px;}


      .animate.left.move {
        left: 100%; 
        transform: translate(-100%, 0);
      }

      .animate.right.move {
        right: 100%; 
        transform: translate(100%, 0);
      }

      .animate.top.move {
        top: 100%; 
        transform: translate(0, -100%);
      }

      .animate.bottom.move {
        bottom: 100%; 
        transform: translate(0, 100%);
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click to animate
<div class="animate left">left</div>
<div class="animate top">top</div>
<div class="animate bottom">bottom</div>
<div class="animate right">right</div>

然后根据位置动画...

Answer 2

对于具有动态宽度的元素，可以使用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 3

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

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

Answer 4

这在 Chromium 上对我有用。 translate 的 % 是指它所应用的元素的边界框的大小，因此它可以完美地将元素移至右下边缘，而无需切换用于指定其位置的属性。

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