Сделать кнопку сверху при прокрутке вниз без плагинов только с css и vanilla js - PullRequest
Новая
       20

Сделать кнопку сверху при прокрутке вниз без плагинов только с css и vanilla js

0 голосов
/ 04 июня 2019

Я хочу, чтобы кнопка плавно появлялась (анимировалась) из скрытого вверх: 10 пикселей вправо: 10 пикселей.

Я не могу использовать библиотеки, только css и vanilla js.

Мое текущее решение выглядит следующим образом: `

@keyframes example {
    from { top: -10px }
    to { top: 10px }
}

.navButton {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2000;
  animation-name: example;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

`

Кнопка изначально есть, затем, когда я обновляюсь, она появляется сверху, но сильно отстает.

1 Ответ

0 голосов
/ 06 июня 2019

Ваш CSS отлично работает для меня.Какой браузер вы используете?

Чтобы сделать его более плавным, вы можете поиграть с «с позиции» и продолжительностью, как я сделал здесь (проверено в Edge, Firefox и Chrome): 

@keyframes example {
    from { top: -100px }
    to { top: 10px }
}

.navButton {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 2000;
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: 1;
}
<button class="navButton">test button</button>
...