CSS3 переходы к динамически создаваемым элементам - PullRequest
Новая
       13

CSS3 переходы к динамически создаваемым элементам

20 голосов
/ 19 октября 2010

Я пытаюсь анимировать динамически создаваемый HTML-элемент с переходами CSS3 .

Я хочу, чтобы анимация запускалась непосредственно перед созданием элемента.
Для них я создаю класс, который устанавливает исходную позицию элемента, а затем я устанавливаю целевую позицию с помощью jquery css.() method

Но новый элемент, который он просто появляется в целевой позиции без какого-либо перехода.

Если я использую setTimeout 0 мс, чтобы установить новое значение css, это будет работать.1014 *

Есть что-то, что я делаю не так?или это ограничение?Я не думаю, что мне нужно использовать обходной путь 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>

1 Ответ

18 голосов
/ 03 августа 2011

Вам не нужно использовать тайм-аут.Тайм-аут работает, потому что страница переформатирована между настройками стилей.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;

Проверено в chrome12 на mac

...