CSS3过渡到动态创建的元素

I'm trying to animate a dynamically created html element with CSS3 transitions.

我正在尝试使用CSS3过渡动画创建动态创建的html元素。

I want the animation to start just before the element is created.
For these i create a class that set the original position of the element and then I set the target position by the jquery css() method

我希望动画在元素创建之前启动。对于这些我创建一个类来设置元素的原始位置，然后我通过jquery css（）方法设置目标位置

But the new element it just apears in the target position without any transition.

但它刚刚在目标位置上出现的新元素没有任何过渡。

If I use a setTimeout of 0ms to set the new css value it work.

如果我使用0ms的setTimeout来设置它的新css值。

There is something I'm doing wrong? or is a limitation? I don't think I should need to use the setTimeout workaround.

有什么我做错了吗？或者是一种限制？我认为我不应该使用setTimeout解决方法。

Thanks!

谢谢！

UPDATE: Here is a link with the code running on jsfiddle.net for you to experiment. http://jsfiddle.net/blackjid/s9zSH/

更新：这是与jsfiddle.net上运行的代码的链接，供您进行实验。 http://jsfiddle.net/blackjid/s9zSH/

UPDATE I've updated the example with the solution in the answer.
http://jsfiddle.net/s9zSH/52/

更新我已经用答案中的解决方案更新了示例。 http://jsfiddle.net/s9zSH/52/

Here is a fully working example code

这是一个完整的示例代码

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
        <script type="text/javascript">

        //Bind click event to the button to duplicate the element
        $(".duplicate").live("click", function (e){
            var $to = $("#original .square").clone()
            $("body").append($to);
            if($(e.target).hasClass("timeout"))
                //With setTimeout it work
                setTimeout(function() {
                    $to.css("left", 200 + "px");
                },0);
            else if($(e.target).hasClass("notimeout"))
                // These way it doesn't work
                $to.css("left", 200 + "px");
        });

        </script>
        <style type="text/css">
        .animate{
            -webkit-transition: all 1s ease-in;
        }
        .square{
            width:50px;
            height:50px;
            background:red;
            position:relative;
            left:5px;
        }
        </style>
    </head>
    <body>
        <div id="original">
            <div class="square animate"></div>
        </div>

        <button class="duplicate timeout">duplicate with setTimeout</button>
        <button class="duplicate notimeout">duplicate without setTimeout</button>
    </body>
</html>

1 个解决方案

#1

You don't need to use a timeout. Timeout works because the page is reflowed between setting styles. Reflowing recalculates the styles.If you don't recalculate the styles, the second style simply overwrites the first. That's the real issue.

您不需要使用超时。超时有效，因为页面在设置样式之间重排。 Reflowing重新计算样式。如果不重新计算样式，则第二种样式只会覆盖第一种样式。这才是真正的问题。

Rather, you can simply:

相反，你可以简单地说：

obj.className = style1;
window.getComputedStyle(obj).getPropertyValue("top");
obj.className = style2;

If you're animating multiple objects, you only need to "pump" the style calculator once:

如果您要为多个对象设置动画，则只需要“抽”一次样式计算器：

obj.className = style1;
obj2.className = style1;
obj3.className = style1;
window.getComputedStyle(obj).getPropertyValue("top");

obj.className = style2;
obj2.className = style2;
obj3.className = style2;

Tested in chrome12 on mac

在Mac上测试chrome12

#1