Использование CSS translateY ()

Question

Я перемещаю некоторый элемент из (высота браузера + высота элемента) px в верхнюю часть браузера в -50px браузера, используя ключевые кадры CSS, и это работает, но проблема в том, что он отстает, и я хорошо знаю, что использование translateYрешить эту проблему.

Теперь предположим, что у меня есть CSS следующим образом.

.bubble
{
    -webkit-transition: -webkit-transform 1s ease-in-out;
}

.bubble.move
{
    -webkit-transform: translateY(-50px);
}

Поскольку элемент находится ниже экрана браузера (высота браузера + высота элемента) px, и я хочу, чтобы он переместилсяв верхней части экрана при -50px это не работает.Он просто перемещает элемент из его текущей позиции в -50px той текущей позиции, которая не предназначена.Как я могу попросить переходы идти на -50px браузера, а не элемента?

Answer 1

Перевод не то, что вы ищете. Вы хотите расположить элемент абсолютно и поместить переход в верхнее свойство. Что-то вроде:

.bubble {
  position:absolute;
  top:100%;
  transition:top 1s ease-in-out;
}
.bubble.move {
  top:50px;
}

Единственным недостатком этого подхода является то, что тело должно быть относительным родителем .bubble. Я пропустил префиксы поставщиков, потому что ненавижу их.

Answer 2

Используйте javascript для его расчета и установите CSS, используя также javascript

Answer 3

Вы пробовали позиционировать элемент абсолютно, а не относительно?