Transitions CSS3 avec toggleClass

J'ai le -webkit-transition-duration propriété définie sur un div, dont la hauteur est définie par une autre classe. Lorsque j'utilise jQuery pour faire basculer la classe, c'est que la transition a quelque chose de funky.

Il va tout le chemin vers le haut, puis est réglé à la bonne hauteur au lieu de simplement déplacer de 50px hauteur automatique de la hauteur qui est ce que j'attends qu'il fasse. Quelle est la solution pour cela?

Voici une démo: http://jsfiddle.net/XcFxQ/1/

Très bizarre... l'Animer grâce à jQuery seulement ne semble pas aider.

OriginalL'auteur Q2Ftb3k | 2011-11-20

  1. 6

    Cela fonctionne:

    http://jsfiddle.net/Eric/XcFxQ/2/

    Bien que la hauteur n'est pas strictement auto. Il définit manuellement la hauteur afin de faire animer.

    Pas de problème!

    OriginalL'auteur Eric

  2. 2

    J'ai été en mesure de l'obtenir pour fonctionner correctement sans -webkit-transition-property et au lieu d'utiliser jQuery 1.7 avec jQuery UI comme dans ce violon:

    http://jsfiddle.net/pjFAt/

    Dans mes tests, cela produit le plus propre et le plus robuste des résultats.

    Maintenant, je ne suis pas sûr si vous êtes désireux sur l'inclusion de jQuery UI dans votre page web. Si non, c'est ma meilleure supposition que vous pourriez avoir à contourner le rendu des défauts à l'aide de certains Javascript (ie. si hasClass, puis d'animer, etc...)

    Ouais, je préfère ne pas inclure jQuery UI, mais je pourrais probablement le contourner avec jQuery animate. J'espérais qu'il y avait un moyen de le faire avec CSS lui-même, mais je ne crois pas. Merci 😉
    Merci pour vos précieuses réponses. J'étais coincé dans mon projet que j'ai dû faire un côté de la barre de menu dans le bootstrap. J'ai dû basculer de classe entre le col des classes. Jquery lui-même ne permet pas de transitions. Par conséquent utilisé jquery UI pour accomplir cette tâche et cela a fonctionné comme un charme

    OriginalL'auteur Matt