Сдвиньте анимацию, меняя классы

Question

Сдвиньте анимацию, меняя классы

0

Я создал простую систему тостов. У меня есть невидимый (bottom: -50px; position: fixed;) block:

<div class="toast" ng-class="$root.peekToast.class" ng-bind="$root.peekToast.msg"></div>

Затем я добавляю класс toast-show (с анимацией), используя ng-class когда нужен тост:

.ew-toast-show {
  -webkit-animation: ew-toast-show 0.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: ew-toast-show 0.5s forwards;
  animation-delay: 500ms;
}

@-webkit-keyframes ew-toast-show {
  100% { bottom: 20px; }
}

@keyframes ew-toast-show {
  100% { bottom: 20px; }
}

Однако, когда тост готов к закрытию, я хочу, чтобы у вас был классный toast-hide который slides-down тосты, когда он заменяет класс toast-show.

Я попытался дублировать анимацию анимации show, просто используя -50px вместо 20px. Это не совсем сработало. Он спрятался и показал блок, прежде чем сдвинуть его.

Каков правильный способ сделать это?

Michael 29 июль 2016, в 15:34

Источник

Теги:

javascript

angularjs

css

animation

1 ответ

Ещё вопросы

Frank Tan · Accepted Answer · 2016-07-29T13-42-00.000Z

Если вы хотите немного изменить свой код, и вы можете его поддержать, я думаю, что использование transform и transition будет проще, чем @keyframes.

$('#b').click(() => $('.toast').toggleClass('ew-toast-show'));

.toast {
  position: fixed;
  bottom: -50px;
  transition: transform 0.5s;
}

.ew-toast-show {
  transform: translateY(-70px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toast">Toast</div>
<button id="b">Toggle</button>

Я добавил jQuery для удобства. Ключ устанавливает transition на .toast. В этом примере мы говорим о том, что хотим оживить свойство transform и продлить его на 0,5 секунды. Затем класс, когда вы показываете тост, использует transform для указания конечной позиции. CSS будет заботиться о анимации.