Более краткий способ написания кода ключевого кадра css / sass - PullRequest
Новая
       8

Более краткий способ написания кода ключевого кадра css / sass

1 голос
/ 13 марта 2019

Я хочу скрыть модалы, используя обратную анимацию, по которой они появились.

Пока что стратегия, которую я придумал, заключается в создании CSS-правил с «обратным» аналогом: 

.modal-animate-zoom {
  animation: animatezoom 0.77s;
}

.modal-animate-zoom-reverse {
  animation: animatezoom-reverse 0.77s;
}

@keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
}

@keyframes animatezoom-reverse {
  from {transform: scale(1)} 
  to {transform: scale(0)}
}

И делать что-то подобное в JavaScript, когда я хочу скрыть модальное: 

modal.classList.remove('modal-animate-popup')
modal.classList.add('modal-animate-popup-reverse')
// modalsList is the children of parent container
setTimeout(_ => { modalsList.removeChild(modal); }, 770)

Это работает. Проблемы, с которыми я сталкиваюсь:

  1. В CSS много дублирования (вы не можете назвать это кодом, но оно в моей базе кода, и у меня не будет тупого дублирования, которого я могу избежать)
  2. Время ожидания в JS должно соответствовать продолжительности анимации, и, очевидно, я не хочу дублировать эти значения в JS и CSS.

Я думаю об этих двух вариантах:

  1. Приведите в порядок CSS как можно лучше (я использую SCSS) и, возможно, слушаю событие завершения перехода в JavaScript
  2. Использование CSSOM для установки стилей, получение значения тайм-аута из переменной JS (но тогда я не уверен, что смогу использовать что-то вроде autoprefixer, но, возможно, мой код Js может это сделать?)

Кто-нибудь может порекомендовать тот или иной путь или альтернативное решение?

1 Ответ

1 голос
/ 13 марта 2019

Вы можете удалить анимацию animatezoom-reverse и изменить animation-direction на основе включения обратного класса. Обратите внимание, что forwards и reverse делают две совершенно разные вещи.

Режим анимации-заполнения: вперед

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

анимация-направление: реверс

Шаги анимации выполняются в обратном направлении, а также функции синхронизации обратный. 

.modal-animate-zoom {
  animation: animatezoom 0.77s forwards;
}

.modal-animate-zoom-reverse {
  animation: animatezoom 0.77s reverse forwards;
}

@keyframes animatezoom {
  from {transform: scale(0);} 
  to {transform: scale(1);}
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
}
<div class="box modal-animate-zoom">box</div>
<div class="box modal-animate-zoom-reverse">box</div>

Более усовершенствованная версия выше с меньшим количеством повторений: 

.modal-animate-zoom {
  animation: animatezoom 0.77s forwards;
}

.reverse-animation {
  animation-direction: reverse;  
}

@keyframes animatezoom {
  from {transform: scale(0);} 
  to {transform: scale(1);}
}

.box {
  width: 100px;
  height: 100px;
  background-color: green;
}
<div class="box modal-animate-zoom">box</div>
<div class="box modal-animate-zoom reverse-animation">box</div>
...