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

回答

相关问题