Question

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

Answer 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%;}
}

Answer 2

您无法在转换中从display:none切换到display:block。这就是为什么你的动画会立即发生的原因。

在转换中包含显示更改会让CSS捕捉到位置。

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

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

示例的代码

Answer 3

正如迈克尔上面的回答，需要在任何动画生效之前绘制图像。我们来看看您的代码：

$(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上的演示。

希望这有帮助。

Answer 4

使用转换速记属性时，延迟放在最后。在您的代码中，您的过渡将持续20秒，不会有任何延迟。

如果你希望延迟20秒，它应该写成：

transition:all 2s ease-in 20s;

修改

Here is a demo

CSS3转换立即发生？

4 个答案: