讓通知欄從底部向上滑動

我有一個從頁面底部向上滑動的小水平通知欄。讓通知欄從底部向上滑動

它表現良好，但是當您打開頁面時，它會快速閃爍，然後消失然後向上滑動。

如何修改它，使其在過渡發生之前不會出現/消失？

#notificationBarBottom { 
 
    position: fixed; 
 
    z-index: 101; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: #5cb85c; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
    overflow: hidden; 
 
    -webkit-box-shadow: 0 0 5px black; 
 
    -moz-box-shadow: 0 0 5px black; 
 
    box-shadow: 0 0 5px black; 
 
} 
 
@-webkit-keyframes slideDown { 
 
    0%, 100% { 
 
    -webkit-transform: translateY(0px); 
 
    } 
 
    10%, 
 
    90% { 
 
    -webkit-transform: translateY(510px); 
 
    } 
 
} 
 
@-moz-keyframes slideDown { 
 
    0%, 100% { 
 
    -moz-transform: translateY(0px); 
 
    } 
 
    10%, 
 
    90% { 
 
    -moz-transform: translateY(510px); 
 
    } 
 
} 
 
.cssanimations.csstransforms #notificationBarBottom { 
 
    -webkit-transform: translateY(510px); 
 
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards; 
 
    -moz-transform: translateY(510px); 
 
    -moz-animation: slideDown 2.5s 1.0s 1 ease forwards; 
 
}

<div id="notificationBarBottom">Hello, human!</div>

的jsfiddle演示在這裏：https://jsfiddle.net/cnfk36jd/（可惜這個問題是不可見的存在）。這裏是你可以看到「閃爍」的頁面http://www.whycall.me/bannerTest.html

我嘗試了這裏的建議：https://css-tricks.com/pop-from-top-notification/並調整了translateY值，但它沒有幫助，不知道還有什麼其他的做。

謝謝您的幫助

來源

2016-09-22 Robert Sinclair

能不能請你用下面的:(使迭代值爲0）:: .cssanimations.csstransforms #notificationBarBottom { -webkit-transform：translateY（510px）; -webkit-animation：slideDown 2.5s 1.0s 0易於轉發; -moz-transform：translateY（510px）; -moz-animation：slideDown 2.5s 1.0s 0易於轉發; } – Pranab

它沒有工作，它只能從底部平滑過渡 –

元素初始位置是可見的，然後，頁面加載過程中，首先在翻譯踢隱藏它，因此它閃爍。

這樣做，你把它放在底部，bottom: -510px;，然後將其向上滑動。

更新小提琴：https://jsfiddle.net/cnfk36jd/1/

#notificationBarBottom { 
 
    position: fixed; 
 
    z-index: 101; 
 
    bottom: -510px; 
 
    left: 0; 
 
    right: 0; 
 
    background: #5cb85c; 
 
    color: #ffffff; 
 
    text-align: center; 
 
    line-height: 2.5; 
 
    overflow: hidden; 
 
    box-shadow:   0 0 5px black; 
 
} 
 
@keyframes slideDown { 
 
    0% { transform: translateY(0px); } 
 
    100% { transform: translateY(-510px); } 
 
} 
 
#notificationBarBottom { 
 
    animation: slideDown 2.5s ease forwards; 
 
} 
 
#close { 
 
    display: none; 
 
}

<div id="notificationBarBottom">Hello, human!</div>

附註：我暫時刪除的前綴屬性，所以你需要將它們添加回

來源

2016-09-22 20:02:25 LGSon

我喜歡這個答案，但沒有解釋我不能upvote這個。 – Persijn

@Persijn新增了一個 – LGSon

確實有我的upvote，但你只是在說你在做什麼。不是爲什麼他閃爍，而你的不是。 – Persijn

我想這是因爲發生在你寫的代碼的CSS文件被稱爲有點爲時已晚。

在HTML頁面中，嘗試調用此css文件早於其他CSS或JS文件

來源

2016-09-22 18:45:37 Visrozar

讓通知欄從底部向上滑動

回答

相關問題