Как переформатировать этот CSS-код, чтобы сделать его наоборот? - PullRequest
Новая
       7

Как переформатировать этот CSS-код, чтобы сделать его наоборот?

0 голосов
/ 29 января 2019

У меня есть код анимации CSS, который заставляет объект анимироваться как появляющийся снизу вверх (при прокрутке).Вот код, 

 .animate-in-down {
  transition: all 1.3s ease-out;
    position:relative;
  opacity:1;
  top:0px;
  &.out-of-viewport {
    top:40px;
    opacity:0;
  }
}

Я хочу, чтобы этот код делал противоположную сторону того, что он делает сейчас.Что означает, что это должно идти сверху вниз.Пожалуйста, помогите.

1 Ответ

0 голосов
/ 29 января 2019

Вот самая простая форма того, что вы пытаетесь.

Ключевые моменты:

  • Вам не нужно объявлять начальные переходные состояния в вашем CSS, например opacity: 1.Он неявный и избыточен для включения.
  • Не переходите / анимируйте, используя top, но вместо этого transform, поскольку он собирается предложить лучшую производительность (особенно для более слабых мобильных устройств) ( Подробности ). 

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.box').classList.toggle('hide');
});
.box {
  height: 100px;
  width: 100px;
  background-color: red;
  transition-duration: .5s;
  transition-property: opacity, transform;
  transition-timing-function: ease-in-out;
}

.box.hide {
  opacity: 0;
  transform: translateY(-300px);
}
<div class="box"></div>
<button>Toggle</button>

https://jsfiddle.net/wrds8gf5/

...