通过更改类下滑动画

Question

我创建了一个简单的吐司系统。我有一个不可见（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即的敬酒时它代替toast-show类。

我试图通过仅使用-50px而不是20px来复制show动画逻辑。它没有工作。它在滑下之前隐藏并显示了该块。

什么是正确的做法？

Answer 1

如果你愿意改变你的代码，并且你可以支持它，我认为使用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秒。然后，当你展示烤面包时，课程使用transform来表示最终位置。 CSS会照顾动画。