我有一个名为#artwork
需要动画化:
#artwork{
-webkit-transition: all 20s ease-in;
transition:all 20s ease-in;
width:75%;
display:block;
margin:0px auto;
}
#artwork.trans{
width:60%;
}
问题是,转换立即发生,没有任何延迟(在我的例子中是 20 秒)。我已经尝试过 Jquery 的toggleClass
功能无济于事,我也尝试过css
功能也不起作用。
$(window).load(function(){
var addImage = function(background){
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
元素需要先绘制在页面上,然后才能进行转换。如果添加一个元素,最好在更改其样式之前给予 10-100 毫秒的初始状态渲染时间。
您可能还想考虑使用动画,这样您就可以在没有延迟的情况下完成此操作。
这是我用来将某些内容从右侧移动到页面中的动画,请随意修改它以满足您的需要。
.some_class{
-webkit-animation: myanimation 500ms ease-in-out;
-moz-animation: myanimation 500ms ease-in-out;
animation: myanimation 500ms ease-in-out;
}
@-webkit-keyframes myanimation {
0% { left: 200%; }
100% { left: 0%; }
}
@keyframes myanimation {
0% { left: 200%; }
100% { left: 0%;}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)