CSS3过渡会立即发生吗? [英] CSS3 Transitions happen instantly?

问题描述

我有一个名为 #artwork 的元素，需要对其进行动画处理:

I have an element called #artwork which needs to be animated:

#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 函数，该函数也无效.

The problem is, the transition happens instantly without any delay (in my case 20s). I have tried Jquery's toggleClass function to no avail and I also tried the css function which also didn't work.

$(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-100ms的渲染时间.

The element needs to be drawn on the page before it can be transitioned. If you add an element it's a good rule of thumb to give 10-100ms for the initial state to render before changing it's styles.

您可能还想考虑使用动画，而您可以立即进行动画制作.

You may also want to consider using an animation instead, which you can do without the delay.

这是我用来将某些内容从右移到页面中的动画，可以随时对其进行修改以满足您的需求.

Here's an animation I've used to move something into the page from the right, feel free to modify it to suit your needs.

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

这篇关于CSS3过渡会立即发生吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！