javascript - När man använder CSS-övergångar/animationer/etc., vad är det bästa sättet att falla tillbaka på jquery om användarens webbläsare inte stödjer css-animationer?


Jag letar efter ett sätt att använda CSS-animationer, men om användarens webbläsare inte stöder CSS-animationer - att då istället använda Jquery för animationen. Finns det ett enkelt sätt att göra detta i Jquery? Ett plugin skulle vara OK, om det var ett litet plugin, men jag letar verkligen efter något sätt att göra detta i Jquery om möjligt. Den enda anledningen till att jag vill använda CSS-animationer är på grund av den mycket lägre processoranvändningen när man använder CSS-animationer.

Svar #1

jQuery animate-förbättrade plugin använder CSS-övergångar utan att behöva skriva specifik kod för webbläsare som stödjer övergångar

Alternativet är inte särskilt uppmuntrande: du skulle kunna lägga till ett funktionsdetekteringsbibliotek som Modernizr och sedan skriva specifik kod för varje fall, såsom...

if (Modernizr.csstransitions) {
  $("#yourdiv").css({
    "-webkit-transform" : "translate(0, 10)",
    "-o-transform" : "translate(0, 10)",
    "-moz-transform" : "translate(0, 10)",
    "-ms-transform" : "translate(0, 10)",
    "transform" : "translate(0, 10)"
});
}
else {
  //do jquery animate stuff
}

Svar #2

Du borde inte bry dig om det. Animationer är inte avgörande. Om du gör progressiv förbättring kommer varje användare att få den bästa upplevelsen deras webbläsare tillåter dem att ha :).

Om du bryr dig så mycket om den där "processorprestandan" vill du inte ha några animationer på IE alls. Annars, använd bara jQuery, det verkar vara bäst för dina särskilda behov.