Fallback JQuery per la transizione CSS3

Sto cercando un fallback JQuery/JS per un semplice codice di transizione CSS3. Il mio javascript è molto semplice quindi non è facile per me trovare e scrivere un codice sostitutivo. Ho già controllato modernizr ma non ho capito molto della documentazione.Fallback JQuery per la transizione CSS3

È un'icona che utilizza transform: rotate(20deg) al passaggio del mouse (non è un problema in quanto supporta in IE). Ma il problema è il passaggio, sto usando

.icon{ 
....other css code 
-webkit-transition: all 300ms linear; 
-moz-transition: all 300ms linear; 
-o-transition: all 300ms linear; 
-ms-transition: all 300ms linear; 
transition: all 300ms linear; 
}

c'è un ripiego JQuery per questo? Stavo pensando a fadeIn(); ma non ho idea di come lo avrei codificato. qualcosa di simile ?:

<script>$(icon).hover(function(){$(icon).fadeIn("slow");}); </script>

e come ho lasciato il browser so che è un ripiego in modo che solo scegliere il JQuery se si tratta di IE?

fonte

2013-03-28 fumpr

use jquery animate –

La bellezza dell'uso delle transizioni CSS è che se non è supportato, il cambiamento avviene comunque, ma non è animato. Lo starei d'accordo .. – Bill

@BillyMathews sì, ora lampeggia in IE, il che non è male, ma voglio dare a tutti la stessa esperienza, dal momento che il 35% delle persone (io sono del Belgio) usa ancora IE. – fumpr

Transit traduce jQuery anima le chiamate alle animazioni CSS3 e ricade in js regolari per i browser non supportati.

In alternativa, è possibile estendere $ .support per verificare le transizioni like this e utilizzare jQuery animate quando il test non riesce.

fonte

2013-03-28 13:33:49

Penso che ti sbagli. Come affermato in precedenza, "Transit degrada i browser più vecchi semplicemente non eseguendo le trasformazioni (rotazione, ridimensionamento, ecc.) Mentre si eseguono ancora CSS standard (opacità, marginLeft, ecc.) Senza alcuna animazione". Tutte le fallback devono essere programmate da soli. –

@ René "Fallback all'animazione basata su frame Se si desidera eseguire il backup delle animazioni classiche quando le transizioni non sono supportate, ridefinire manualmente .transitition in .animate." –

Penso che tu abbia già la risposta, dovresti usare modernizr, non è complicato come pensi, ci sono due modi in cui modernizr specifica quali sono le funzioni disponibili e quali no, il primo è attraverso un set di classi CSS in l'elemento HTML:

<html class="js no-flexbox canvas canvastext postmessage no-websqldatabase ... ">

se è disponibile apparirà il nome, se non è disponibile apparirà il nome con un preffix "no-" come "no-FlexBox", il secondo uno è attraverso javascript:

if(!Modernizr.csstransitions)

Modernizr ha un set di bool variabili ean che possono dirti se è disponibile o meno, quindi se vuoi impostare un fallback per la tua animazione ti suggerisco di usare le classi Modernizr per specificare l'animazione solo per i browser che hanno questa funzione:

.csstransitions #element{ 
-webkit-transition: ... ; 
-moz-transition: ... ; 
-o-transition: ... ; 
-ms-transition: ... ; 
transition: ... ; 
}

e quindi creare un file JavaScript con le variabili che Modernizr ha Verificando la funzione è disponibile, se non è quindi specificare l'animazione:

if(!Modernizr.csstransitions) 
    $("#element").hover(function(){ $(this).animate({ ... your animation ... }, 5000); });

questo potrebbe dare un'idea di come funziona Modernizr (spero), comunque se hai un problema puoi controllare questo blog post che ho fatto molto tempo fa, dice qualcosa di simile a questo altre cose come CSS3PIE (questo non è spam, sto solo cercando di aiutare).

fonte

2013-03-28 13:46:57 mechdeveloper

grazie! provatelo subito – fumpr

potresti anche estendere $ .support se hai solo bisogno di rilevare le transizioni ... e comunque quale effetto dovrebbe avere una dissolvenza su un elemento che è già visualizzato? –

Beh, volevo solo mostrare come funziona Modernizr, non sono sicuro di cosa sia l'animazione, quindi non so quale effetto dovrebbe avere fadein su un elemento che è già visualizzato. – mechdeveloper

Fallback JQuery per la transizione CSS3

risposta

Problemi correlati