CSS3转换立即发生?

时间:2015-02-10 21:38:36

标签: javascript jquery css3 css-transitions

我有一个名为#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");
});

4 个答案:

答案 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捕捉到位置。

您需要将显示切换为阻止,然后等待一帧,然后将其他新属性应用于动画。这就是为什么当您更改检查器中的值时,它们会设置动画。

这是一个显示上述http://codepen.io/gunderson/pen/emyReW

示例的代码

答案 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下方的其他功能toggleClassappend。这就是为什么你永远不会看到你的图像动画。

要解决此问题,您需要将追加图像代码放入另一个函数,并将动画代码放入另一个函数中,如下所示:

$(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;

修改

Here is a demo