如何在n秒钟后从顶部过渡到底部，在顶部显示通知栏？

Question

在许多移动网站中，几秒钟后，我看到通知从上到下随动画一起出现。 目前，我不记得这些网站。 我能够找到如何显示顶部通知，但无法找到如何使用CSS 3 Transition或javscript / jquery对此进行动画处理。 这是我找到的链接， http://www.red-team-design.com/cool-notification-messages-with-css3-jquery

Answer 1

这就是我解决问题的方式

 /* JAVA SCRIPT */ setTimeout(function () { $('.notify-bar').show().addClass('notify-bar-height-change'); },2000) 

 /* CSS : */ .notify-bar{ background-size: 40px 40px; background-image: linear-gradient( 135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); background-color: #4ea5cd; border-color: #3b8eb5; padding: 5px; } .notify-bar-height { height: 0; -webkit-transition: height 0.5s ease; -moz-transition: height 0.5s ease; -o-transition: height 0.5s ease; -ms-transition: height 0.5s ease; transition: height 0.5s ease; } .notify-bar-height-change { height: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="notify-bar notify-bar-height" style="display: none"> Intall ABC! </div> 

Answer 2

如果您正在使用jquery移动库，则可以使用$（'＃some_selector'）。slideDown（2000）。 希望这可以帮助。

类似的问题