javascript - 如何在 n 秒后在顶部显示通知栏并从上到下转换？

Question

在许多移动网站中，我看到通知会在几秒钟后从上到下显示动画。目前，我不记得这些网站。我能够找到如何显示顶部通知，但无法找到如何使用 CSS 3 过渡或 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)。希望这可以帮助。

类似的问题