Question

我创建了一个简单的吐司系统。我有一个不可见的（if(Request.Cookies["isPageRefresh"] == null) { Response.Cookies["isPageRefresh"].Value = "true"; Response.Cookies["isPageRefresh"].Expires = DateTime.Now.AddDays(1); } if (!IsPostBack) { if (Server.HtmlEncode(Request.Cookies["isPageRefresh"].Value== "false") { Response.Redirect("~/Pages/EstimateList.aspx", true); } //enter some code } Response.Cookies["isPageRefresh"].Value = "false"; //enter some code）块：

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动画逻辑。它没有奏效。它在滑下之前隐藏并显示了块。

这样做的正确方法是什么？

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。关键是在transition上设置.toast。在这个例子中，我们说我们要为transform属性设置动画并使其持续0.5秒。然后，当您显示吐司时的类使用transform来指示最终位置。 CSS将负责制作动画。

通过更改类向下滑动动画

1 个答案: