我有一个名为#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");
});
答案 0 :(得分:1)
在转换元素之前,需要在页面上绘制元素。如果你添加一个元素,那么在更改它的样式之前,为初始状态提供10-100ms是一个很好的经验法则。
你可能还想考虑使用动画,你可以毫不拖延地做。
这是我用来从右边移动某些内容的动画,随时修改它以满足您的需求。
.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%;}
}
答案 1 :(得分:0)
您无法在转换中从display:none
切换到display:block
。这就是为什么你的动画会立即发生的原因。
在转换中包含显示更改会让CSS捕捉到位置。
您需要将显示切换为阻止,然后等待一帧,然后将其他新属性应用于动画。这就是为什么当您更改检查器中的值时,它们会设置动画。
示例的代码答案 2 :(得分:0)
正如迈克尔上面的回答,需要在任何动画生效之前绘制图像。 我们来看看您的代码:
$(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");
});
调用append
函数后,图像开始加载。目前,浏览器将继续执行css
下方的其他功能toggleClass
或append
。这就是为什么你永远不会看到你的图像动画。
要解决此问题,您需要将追加图像代码放入另一个函数,并将动画代码放入另一个函数中,如下所示:
$(window).load(function(){
var addImage = function(background){
appendImage(background);
animateImage();
};
var appendImage = function(background) {
$("#images").append("<div class='image'><img id='artwork' src='"+ background +"' /></div>");
};
var animateImage = function() {
$("#artwork").css("width", "65%");
$("#artwork").toggleClass("trans");
};
addImage("http://4.bp.blogspot.com/-f5Oju8nYOe4/T91Kdqww3GI/AAAAAAAAGEk/s1tZR76WQfc/s1600/winter-wallpaper-7.jpg");
});
在此代码中,addImage
函数将调用两个外部函数,这些函数将按顺序执行。通过这样做,animateImage
将在appendImage
函数完成后立即调用。
这是Codepen上的演示。
希望这有帮助。
答案 3 :(得分:-1)
使用转换速记属性时,延迟放在最后。在您的代码中,您的过渡将持续20秒,不会有任何延迟。
如果你希望延迟20秒,它应该写成:
transition:all 2s ease-in 20s;
修改强>