Transition Boostrap Twitter

Hello
concernant le menu de Bootstrap Twitter j’ai quelques difficultés à comprendre comment appliquer un effet de transition pour le menu dropdown. Je pensais que l'application d'une propriété css -transition aurait fait l’affaire, mais apparemment, si j’ai bien compris, on doit passer par l’intégration d'un fichier bootstrap-transition.js. que j’ai trouvé ici et que j'ai intégré dans mon code html, après j’ai du mal à poursuivre, si quelqu’un avait la gentillesse de m’en dire un peu plus...

Modifié par porcini (22 May 2012 - 15:47)

Je ne connais pas twitter bootstrap mais autant que je puisse le voir le fichier bootstrap-transition.js est utile pour ajouter des effets de transition aux plugins jQuery de twitter boostrap. C'est ecrit la: http://twitter.github.com/bootstrap/javascript.html.

Ce que le script fait c'est qu'il teste pour voir qu'elle propriete de transition de fin le navigateur supporte pour pouvoir utiliser le bon lors des transitions des animations des plugins jQuery du bootstrap (il creer aussi un element "bootstrap" donc il sera possible d'appliquer du css dessus apparement).

Si tu veux juste appliquer des transition en CSS3 a certains elements tu devrais pouvoir le faire sans ce script. Peut-etre que ton navigateur ne supporte pas les transitions et a besoin d'un prefixe proprietaire pour fonctionner correctement?

C'est quoi le code css que tu utilises, et sur quel code html?

Bonjour et merci pour la réponse.
Si tu ne visualises pas le CSS de bootstrap cela va être difficile de te faire une idée de sa structure tant elle est complexe.
De mon côté j’ai bien appliqué la règle transition

-webkit-transition:0.8s;
-moz-transition:0.8s;
-ms-transition:0.8s;
-o-transition:0.8s;
transition:0.8s;

aux balises que Firebug me retourne, mais pas moyen d’appliquer cette transition. Par contre j’arrive bien à appliquer la transition de la couleur du fond des liens dans l’élément dropdown. C’est pour cela que je me demande s’il ne faut pas passer par le jQuery...

Voici l’élément auquel je n’arrive pas à appliquer la transition:

http://img.skitch.com/20120523-bc5juccbdyhrg57jyayxcfic49.jpg
Modifié par porcini (23 May 2012 - 13:40)

Ne faut-il pas que tu donnes une propriete pour ta transition css, ou au moins mettre un "all" ?

genre:

  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;  
  -ms-transition: all 0.8s;  
  -o-transition: all 0.8s;  
  transition: all 0.8s;  

je vois a quoi ressemble les menus en twitter bootstrap, c'est genre <ul class="nav"><li>...</ul> si c'est le meme que sur cet example: http://twitter.github.com/bootstrap/examples/fluid.html

tu l'appliques sur quel element ta transition?
Modifié par martint (23 May 2012 - 15:12)

martint a écrit :
Ne faut-il pas que tu donnes une propriete pour ta transition css, ou au moins mettre un &quot;all&quot; ?

genre:

  -moz-transition: all 0.8s; 
  -webkit-transition: all 0.8s;  
  -ms-transition: all 0.8s;  
  -o-transition: all 0.8s;  
  transition: all 0.8s;  

...je ne pense pas car dans le CSS de bootstrap j'ai d'autres déclaration transition et je ne vois nulle part la valeur all

martint a écrit :

tu l'appliques sur quel element ta transition?

...j'ai commencé par l'appliquer à l'élément <ul> qui a la classe dropdown-menu, par après je suis remonté dans l'arborescence en y appliquant à chaque fois la déclaration transition, mais ça ne passe pas
Modifié par porcini (23 May 2012 - 15:41)

Je viens de voir que les menus drop-downs de twitter bootstrap utilise la propriete css "display" pour faire apparaitre/disparaitre les sous menus. Les transitions CSS ne s'appliquent pas sur la propriete display, comme explique ici: http://fvsch.com/code/transition-fade/test2.html..

La seule solution que je vois c'est passer par javascript a ce moment la.

... en effet, et c'est ce que je demande au début de mon post
Mon fichier bootstrap-transition.js est bien lié à ma page html et puis je suppose qu'il faut taper du code, mais je ne trouve pas d'exemples à ce sujet...

...merci, je vais un peu étudier la chose...
... il doit tout de même exister une solution en jQuery et je suis quasi sûr qu'avec le fichier bootstrap-transition.js il y a moyen d'y arriver, si comme tu dis c'est faisable pour les différents plugin de bootstrap, il doit être possible de le faire pour le reste aussi, maintenant comment y arriver, that's the question...

...en tout cas merci pour l'intérêt
Modifié par porcini (23 May 2012 - 17:14)