CSS 3使用jQuery附加動畫append（）

我想要創建如下所示的內容：JQuery Growl Nofitications。因爲我不是非常有這樣的事情，在第一次經歷，我創建的div我追加引導警報通知在頁面的頂部：CSS 3使用jQuery附加動畫append（）

<div id="notificationDiv" style="position: fixed; width: 90%"></div>

我追加到該div通知：

var that = this; 
var uniqueId = new Number((new Date()).getTime()); 
this.messages.push({id: uniqueId, 
        message: this.createMessage(type, uniqueId, direction, size)}); 

$("#notificationDiv").append((this.messages[this.messages.length - 1]).message); 

$("#" + this.idPreffix + (uniqueId).toString()).click(function(){ 
    that.messages.splice(this._findByUniqueId($(this).prop("id").split("_")[1]), 1); 
    $(this).remove(); 
}); 
setTimeout(function(){ 
    that.messages.splice(
    that._findByUniqueId($("#" + that.idPreffix + 
           (uniqueId).toString()).prop("id").split("_")[1]), 1); 
    $("#" + that.idPreffix + (uniqueId).toString()).remove(); 

}, this.timeout);

這就好，它的工作原理 - 例如，當我點擊按鈕nofitication出現在頁面的頂部，並且，固定「。我想動畫添加/刪除通知，然後我擴展（我不知道這是方式很好）Bootstrap的alert類：

.alert{ 
     -webkit-animation-duration: 3s; 
     -webkit-animation-name: slide-in; 
     -webkit-animation-iteration-count: infinite; 
} 

@-webkit-keyframes slide-in{ 
    from{ 
     margin-left: 100%; 
     width: 300%; 
    } 
    to{ 
     margin-left: 0%; 
     width: 100% 
    } 
}

實現類似於我在Mozilla Developer Network中看到的：Using CSS animations。我添加了-webkit-前綴，因爲一開始我想爲我的瀏覽器，Opera 24以及我在"Can I Use: CSS3 Animation"中看到的，我必須添加它。但它不起作用，因爲我對非原始CSS非常陌生，所以我不知道爲什麼以及如何改進它。如果有人決定幫助我，我會很高興 - 事先感謝每一個答案。

P.S. 故意我不想使用JQuery動畫或類似的東西 - 這個想法是，它應該儘可能獨立於外部庫，如JQuery或Bootstrap（我知道我使用Bootstrap類，但它是非常非常非常非常alpha版本:)）。

P.S. 2 警報HTML從的console.log：

<div id='message_1411159143475' class='alert alert-success' 
    style ='float: left; width: 100%;'> 
    Operacja zakończona sukcesem! 
    <i style='margin-left: 5px !important' class='glyphicon glyphicon-ok-sign'></i> 
</div>

來源

2014-09-19 Radek Anuszewski

動畫名稱爲slidein – 2014-09-19 20:30:59

您可以添加警報的HTML嗎？ – 2014-09-19 20:31:17

'動畫持續時間：3秒; animation-name：slidein;'根據需要使用-webkit ...但是如果你正在爲多平臺構建任何東西，應該添加-moz。 – 2014-09-19 20:32:29

現在我知道爲什麼這是沒有工作 - 因爲我的愚蠢:) 的我不得不標籤之間的CSS代碼，而不是正確的標籤<style type="text/css"></style> - 它應該是，沒有：）現在還有另一個問題 - 它顯示時會顯示動畫，但不會隱藏 - 但現在修復起來會更容易。這個答案現在可以關閉。

來源

2014-09-19 21:35:35

CSS 3使用jQuery附加動畫append（）

回答

相關問題