2012-06-11 21 views
9

Ho messo insieme un jsFiddle per illustrare la mia domanda:Come posso ricreare il mio elemento jQuery. Animate() zoom/pan usando css transform?

http://jsfiddle.net/VbCcA/3/

Ho una funzione che sarà pan e zoom ad un elemento specifico. Questo è usato per creare la transizione tra fotogrammi in un fumetto.

L'ho funzionato correttamente con jQuery .animate(), ma mi piacerebbe utilizzare le trasformazioni css quando sono disponibili poiché offrono prestazioni significativamente migliori sui browser moderni.

Tuttavia, non riesco a ricreare correttamente lo stesso comportamento.

Piuttosto che descriverlo male qui, se dai un'occhiata a jsFiddle vedrai due gruppi di controlli, con ogni pulsante corrispondente a una cornice nel 'fumetto'. i controlli di animazione jQuery si comportano correttamente e i controlli di trasformazione css no.

Il problema sembra essere dovuto alla misurazione degli attributi offset() dopo che un elemento è stato ridimensionato utilizzando css-transforms.

Qualsiasi aiuto sarebbe molto apprezzato.

NOTA: Sarà necessario 'run-ri' il jsFiddle quando si passa dal metodo .animate alla trasforma e viceversa, al fine di ripristinare il CSS che viene modificato quando la funzione viene eseguito.

MODIFICA: Ho appena corretto il collegamento a jSfiddle ... Scusa a chi l'ha già visualizzato. Il link originale mancava parte del codice di esempio. Inoltre, per chiarire, ho bisogno di usare valori percentuali in quanto l'intera app è pienamente reattiva.

risposta

1

Non è certamente il percorso più diretto, ma si consideri l'applicazione di jQuery Transit (http://ricostacruz.com/jquery.transit/) alla versione .animate solo per vedere come gestisce la conversione in trasformazione CSS3. Quindi potresti essere in grado di lavorare all'indietro da lì.

+0

Grazie technoTarek, anche se questo non mi ha aiutato a risolvere il mio problema (come nel mio caso d'uso il problema è ancora presente quando si utilizza il transito) questo è un plugin eccellente, e sicuramente meriti puntelli per suggerirlo. Saluti – gordyr

Problemi correlati