CSS之间的转换。右和顶 - >底部位置 [英] CSS transition between left -> right and top -> bottom positions

问题描述

可以使用CSS转换来设置 left：0px 到 right：0px 所以它一路穿过屏幕？我需要完成同样的事情从上到下。我是否卡住计算屏幕宽度/对象大小？

Is it possible to use CSS transitions to animate something between a position set as left: 0px to right: 0px so 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?

#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

and then I use jQuery's .addClass

推荐答案

如果你知道动画元素的宽度/高度，你可以动画的位置（顶部，左，右），然后减去相应的边距。

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

然后根据位置...

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

此实现可能更平滑与 transform：translate（x，y）但是我会保持这样，这样更容易理解。

This implementation would probably be smoother with transform: translate(x,y) but I'll keep it like this so it's more understandable.

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

这篇关于CSS之间的转换。右和顶 - >底部位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！