如何在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）。 希望這可以幫助。

類似的問題