CSS3 transizioni ad elementi creati dinamicamente

StackOverflow https://stackoverflow.com/questions/3969817

  •  09-10-2019
  •  | 
  •  

Domanda

sto provando a animare un elemento HTML creato dinamicamente con Transizioni CSS3.

Voglio che l'animazione inizi poco prima che venga creata l'elemento.
Per questi creo una classe che imposta la posizione originale dell'elemento e quindi imposto la posizione target da JQuery CSS () metodo

Ma il nuovo elemento che copre solo nella posizione target senza alcuna transizione.

Se utilizzo un setTimeout di 0ms per impostare il nuovo valore CSS funzionano.

C'è qualcosa che sto facendo di sbagliato? O è una limitazione? Non credo che dovrei dover usare la soluzione alternativa setTimeout.

Grazie!

AGGIORNARE: Ecco un link con il codice in esecuzione su jsfiddle.net per sperimentare.http://jsfiddle.net/blackjid/s9zsh/

AGGIORNARE Ho aggiornato l'esempio con la soluzione nella risposta.
http://jsfiddle.net/s9zsh/52/

Ecco un codice di esempio completamente funzionante

<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>
È stato utile?

Soluzione

Non è necessario utilizzare un timeout. Il timeout funziona perché la pagina è spigata tra gli stili di impostazione. Reflowing ricalcola gli stili. Se non ricalcola gli stili, il secondo stile sovrascrive semplicemente il primo. Questo è il vero problema.

Piuttosto, puoi semplicemente:

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

Se stai animando più oggetti, devi solo "pompare" il calcolatore di stile una volta:

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

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

Testato in Chrome12 su Mac

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top