我创建了一个简单的吐司系统。我有一个不可见的(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将负责动画处理。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句