代码之家 › 专栏 › 技术社区 › blackjid

CSS3转换为动态创建的元素

transitions css3 css jquery

blackjid · 技术社区 · 14 年前

我正在努力 使有生气 动态创建的HTML元素 CSS3转换 .

我希望动画在创建元素之前就开始。
对于这些,我创建了一个类来设置元素的原始位置,然后通过jquery设置目标位置。 CSS() 方法

但新元素只是模仿目标位置,没有任何过渡。

如果我使用0毫秒的setTimeout来设置新的css值,它就会工作。

我做错什么了?还是限制? 我认为我不需要使用设置超时解决方案。

谢谢!

更新 :这里有一个与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>

1 回复 | 直到 11 年前

mmaclaurin 13 年前

您不需要使用超时。超时工作是因为页面在设置样式之间回流。回流重新计算样式。如果不重新计算样式,则第二个样式只会覆盖第一个样式。这才是真正的问题。

相反,您可以简单地:

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中测试

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前