javascript - 通过更改类向下滑动动画

我创建了一个简单的吐司系统。我有一个不可见的（bottom: -50px; position: fixed;）块：

<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动画逻辑。效果不佳。在将其滑落之前，它隐藏并显示了该块。

正确的做法是什么？

最佳答案

如果您愿意稍微更改代码并可以支持它，我认为使用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将处理动画。

关于javascript - 通过更改类向下滑动动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38660086/