Animazioni CSS3 con trasformare cause offuscata elementi su Webkit

Così ho preso alcuni elementi nativi (divs) con vari effetti applicati (border-radius, box-shadow e transform: scale()). Quando io li animano, due cose strane accadere:

  1. Anche se io non sto cercando di animare la scala, se non metto la scala in animazione, è ignorato.
  2. Quando ho messo la scala in animazione, Webkit confonde gli elementi

Vedere l’esempio qui: http://jsfiddle.net/trolleymusic/RHeCL/ – i pulsanti in basso attiverà i problemi.

Il primo problema accade anche Firefox, così sto indovinando che è perché è così che l’animazione spec dovrebbe funzionare. Quello che non voleva, ma ok, vado a vivere con essa.

Il secondo problema è proprio strano. So che ha a che fare con trasformazione 3d perché se io (solo per scopi di test) dichiarare -webkit-perspective o -webkit-transform-style: preserve-3d; sul cerchio elementi, provoca sfocatura problema. La mia confusione è che io non sto cercando di trasformare la z indice come tutti, e ho provato anche le animazioni è puramente translateY invece di translate.

Accade in Chrome (18), Chrome Canary (20) e Safari (5.1.2 & 5.1.4).

Così, ho ragione in quello che penso sta accadendo? E come posso evitare la sfocatura?

Scenario peggiore: posso usare diverse dimensioni per gli elementi invece di ridimensionamento di loro, che non è davvero un problema – ma ho pensato che questo sarebbe una soluzione più elegante e adesso il problema si è ritagliata.

  • È ignorata perché sia di scala e di tradurre i valori sono di proprietà di trasformazione. Durante l’animazione, si sostituisce il precedente di trasformazione, vale a dire di scala.
  • Sì, ho pensato così. Credo che sia proprio come il transform proprietà funziona, è una vergogna che non è possibile impostare singolarmente le diverse proprietà. Ad ESEMPIO: sono in grado di animare l’opacità di più elementi con diverse classi che hanno proprietà diverse in loro.

 

2 Replies
  1. 17

    Fare riferimento a questa risposta perché è la sfocatura elemento: https://stackoverflow.com/a/4847445/814647

    Riepilogo di cui sopra: WebKit sta prendendo le dimensioni originali/CSS prima di animare, e trattandolo come un’immagine, scale in su, la produzione di sfocatura.

    Soluzione: Rendere la dimensione iniziale della più grande scala si sta andando per, e avviare inizialmente con una scala inferiore (quindi nel tuo caso, vuoi per la dimensione da 5, e impostare la scala iniziale a 0,2)

    AGGIORNAMENTO

    Il motivo per cui si ignora l’attuale scala da quanto ho capito è perché non stai in particolare l’impostazione APPENA tradurre (sto cercando il CSS per ora). Quando si esegue -webkit-animation, è la reimpostazione di tutte le attuali trasformazioni (scala), quindi è necessario assicurarsi che avete la vostra scale in là. Sto cercando il css per modificare, in modo non solo cambia solo la posizione:

    • Grazie, sì, avevo visto, ma il problema è che in questo particolare esempio io sono la creazione di più elementi che hanno la stessa struttura di base, i colori e l’animazione, ma costanti differenti scale. Quindi il problema rimane che avrei bisogno di impostare ciascuna con una diversa dimensione iniziale o creare muleiple Quindi la cosa è che posso scrivere l’iniziale di un elemento come, dire, 400×400, e quindi utilizzare .e grandi .medio di scalare fino a 0.5/0.2 ma poi l’animazione ignorare l’impostazione di scala. Quindi, in questo caso, si può anche impostare le dimensioni su singoli elementi rispetto a usando la scala.
    • Avrei voluto essere in grado di avere: div.circle.big, div.circle.small, div.circle.whatever e hanno .circle impostare le proprietà di base, .big .small .whatever impostare i vari dimensionamento, e per tutti .circles per ereditare la stessa translateY animazione…
    • Ma io non credo che sia possibile…
    • jsfiddle.net/trolleymusic/f7GBp <– @JoshAllen : questo è, credo, la soluzione più pulita possibile. Cosa pensi.
  2. 0

    Il modo migliore che ho trovato è quello di aspettare l’animazione è completa, quindi applicare la trasforma direttamente l’elemento e rimuovere l’animazione di classe. Qualcosa come questo funziona per me, e non produce difetti:

    $m.bindOnce($m('win-text'), 'webkitAnimationEnd', function(){ //avoid blurred problem with animating scale property in webkit
        $m('win-text').style.webkitTransform = 'scale(1.5) translateY(-60px)';
        $m.removeClass($m('win-text'), 'final');
    });

    Sto usando un altra libreria di jQuery, ma si ottiene l’idea.

Lascia un commento