55

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

4

4 回答 4

37

您可以为位置(上、下、左、右)设置动画,然后通过 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>

然后根据位置动画...

于 2012-04-20T17:32:26.570 回答
11

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

topleft {
  top: 0%;
  left: 0%;
}
bottomright {
  top: 100%;
  left: 100%;
  -webkit-transform: translate(-100%,-100%);
}
于 2013-08-29T12:58:48.760 回答
9

对于具有动态宽度的元素,可以使用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上的演示

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

于 2020-03-19T15:41:05.713 回答
5

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

.moveto {
  top: 0px;
  left: calc(100% - 50px);
}
于 2014-11-20T18:44:25.593 回答