Блог

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

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

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

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

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

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

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

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

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

Используйте javascript для его вычисления и установки css также с помощью javascript