但是动态创建的dom,appendto body 后 。再增加class,css3动画出不出来。
通常我们创建css3动画 都是给元素动态添加一个class。
但是动态创建的dom,appendto body 后 。再增加class,css3动画出不出来。
如果延迟一下 再增加 class css3效果就出来了。
不想加延时函数 怎么破 ?
无效果:
var $el = $('<div class="notify-msg"/>');
$el.appendTo(this.container);
$el.addClass('in')
有效果:
var $el = $('<div class="notify-msg"/>');
$el.appendTo(this.container);
window.setTimeout(function(){
$el.addClass('in');
},100)
CSS:
.notify-msg {
position: fixed;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-ms-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 100000;
font-size: 16px;
top: 0;
left: 0%;
opacity: 0;
width:100%;
color: #fff;
padding: 10px;
text-align: center;
background-color: #ff6666;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
-moz-transform: translate3D(0,-100px,0);
-webkit-transform: translate3D(0,-100px,0);
-ms-transform: translate3D(0,-100px,0);
-o-transform: translate3D(0,-100px,0);
transform: translate3D(0,-100px,0);
}
.notify-msg.in{
opacity: 1;
-moz-transform: translate3D(0);
-webkit-transform: translate3D(0);
-ms-transform: translate3D(0);
-o-transform: translate3D(0);
transform: translate3D(0);
}