CSS3 performance? animer la gauche ou la translateX

En HTML5 /CSS3 Démo, je l'ai fais, Im en utilisant les transitions CSS pour la plupart d'accélérer les performances.

Je me demandais pour mon UI - où actuellement JQuery manipule la GAUCHE attribut d'un Div conteneur basé sur la position de la souris par exemple, devrais-je plutôt utiliser transform: translateX(tx) à la place? ou n'JQuery ce faire automatiquement si le navigateur prend en charge?

OriginalL'auteur davivid | 2011-01-20

  1. 4

    jquery ne pas utiliser de transformer: translateX(tx) à la place.
    Vous devez le faire à la main. Mais c'est une bonne pratique de le faire, parce que sa en fait beaucoup plus rapidement.

    http://jsfiddle.net/MZBtr/2/

    Vous pouvez utiliser Mondernizr pour la détection de fonctionnalité et ensuite décider quoi faire après le résultat.

    Ici une démo qui montre:
    http://jsfiddle.net/zWavD/1/

    ah oui je voudrais donc utiliser $("div").css("-webkit-transform", "translate(45px, 0)") par exemple lors du positionnement de la souris et si je voulais animer je voudrais également ajouter une transition à la css.
    pas le faire en css, et d'utiliser le JS comme solution de repli pour les non compatible avec les navigateurs. Si vous me dites ce que vous voulez faire, je peux faire une démo
    j'ai édité mon post pour vous montrer ce que je veux dire.
    ah oui merci, cela fait que nous réalisions un peu d'autres choses que je peux faire mieux maintenant. Cependant, je ne sais toujours pas ce qui est le mieux à faire si dire que je suis d'avoir un div suivre la souris autour de l'utilisation left = e.PageX; top = e.PageY

    OriginalL'auteur meo

  2. 2

    Il y a un jquery extension par Ben Barnett, qui améliore jquery pour animer certaines propriétés (de gauche est l'un d'entre eux) à l'aide de CSS3.

    http://www.benbarnett.net/2010/09/01/enhancing-jquerys-animate-function-to-automatically-use-css3-transitions/

    OriginalL'auteur Ridcully

  3. 0

    JQuery animation anime les propriétés que vous avez à la main, il n'essayez pas de deuxième deviner la liste de propriétés (à ma connaissance)

    La seule raison d'utiliser la traduction plutôt que d'animations JQuery est si vous vous souciez de la meilleure performance sur iPad et iPhone. CSS transformations GPU déchargées sur ces appareils, aussi longtemps que vous utilisez le translate3d, pas translate2d), et ils seront bientôt sur d'autres appareils mobiles comme Android) ainsi que les navigateurs de bureau, comme le Chrome et Safari.

    génial j'ai oublié ceci aidera grandement sur les appareils mobiles.

    OriginalL'auteur Michael Mullany