我已经创建了一个简单的 toast 系统。我有一个不可见的 (bottom: -50px; position: fixed;
) block :
<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
类,当 toast 替换 时
类。slides-down
toast toast-show
我试图通过仅使用 -50px
而不是 20px
来复制 show
动画逻辑。它不太奏效。它在滑下之前隐藏并显示了方 block 。
正确的做法是什么?
最佳答案
如果你愿意稍微改变你的代码,并且你可以支持它,我认为使用 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。关键是在 .toast
上设置 transition
。在这个例子中,我们说我们想要为 transform
属性设置动画并让它持续 0.5 秒。然后,显示 toast 时的类使用 transform
来指示最终位置。 CSS 将负责动画。
关于javascript - 通过改变类滑下动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38660086/