Переход CSS между левыми → правыми и верхними → нижними позициями

Можно ли использовать переходы 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

Ответы

Ответ 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), но я буду хранить ее так, чтобы она была более понятной.

demo: http://jsfiddle.net/nKtC6/

Ответ 2

Это работало для меня на Chromium. Значение% for translate относится к размеру ограничивающего прямоугольника элемента, к которому он применяется, поэтому он отлично передает элемент в нижний правый край, не имея необходимости переключать какое свойство используется для указания его местоположения.

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

Ответ 3

В более современных браузерах (включая IE 10+) теперь вы можете использовать calc():

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