Question

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

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

但新元素只是在目标位置上没有任何过渡。

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

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

谢谢！

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

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

这是一个完整的示例代码

<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>

Answer 1

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

相反，你可以简单地说：

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

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

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

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

在Mac上的chrome12中测试

CSS3过渡到动态创建的元素

1 个答案: