通过更改类向下滑动动画答案

【问题标题】：Slide down animation by changing classes通过更改类向下滑动动画
【发布时间】：2016-07-30 00:38:20
【问题描述】：

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

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

然后我在需要 toast 时使用ng-class 添加一个toast-show（带动画）类：

.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 准备好关闭时，我希望有一个 toast-hide 类 slides-down toast 替换 toast-show 类。

我试图通过使用-50px 而不是20px 来复制show 动画逻辑。它并不完全奏效。它在向下滑动之前隐藏并显示了块。

正确的做法是什么？

【问题讨论】：

标签： javascript css angularjs animation

【解决方案1】：

如果你愿意稍微改变你的代码，并且你可以支持它，我认为使用transform 和transition 会比@keyframes 更容易。

$('#b').click(() =&gt; $('.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。关键是在.toast 上设置transition。在这个例子中，我们说我们想要为transform 属性设置动画并让它持续0.5 秒。然后，当你显示 toast 的类使用transform 来指示最终位置。 CSS 会处理动画。

【讨论】：