javascript - 带有 jQ​​uery append() 的 CSS 3 动画

Question

我想创建这样的东西:JQuery Growl Nofitications .因为我对这样的事情不是很有经验，所以首先我创建了一个 div，我在页面顶部附加了 Bootstrap Alert 通知:

<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);

没关系，它可以工作 - 例如，当我单击按钮时，通知会出现在页面顶部并且已修复"。我想为添加/删除通知设置动画，然后我扩展(我不知道这样是否好)Bootstrap 的警报类:

.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 开发者网络中看到的东西:Using CSS animations .我添加 -webkit- 前缀是因为起初我想为我的浏览器 Opera 24 添加它，正如我在 "Can I Use: CSS3 Animation" 中看到的那样我必须添加它。但它不起作用，而且因为我对非原始 CSS 非常陌生，所以我不知道为什么以及如何改进它。如果有人决定帮助我，我将非常高兴 - 提前感谢每个答案。

附言我故意不想使用 JQuery 动画或类似的东西——我的想法是它应该尽可能独立于外部库，如 JQuery 或 Bootstrap(我知道我正在使用 Bootstrap 类，但它非常-非常-非常 alpha 版本 :))。

附言2个来自 console.log 的警报 HTML:

<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> 

Answer 1

现在我知道为什么那行不通了——因为我的愚蠢:)我的 CSS 代码介于 <script type="text/css">...</script> 之间标签，而不是正确的标签 <style type="text/css"></style> - 应该是，不是 :)现在还有另一个问题 - 它在显示时动画化，但在隐藏时不动画化 - 但现在修复起来会容易得多。现在可以关闭此答案。