6
votes

Faire une frontière CSS à invisible?

est-il possible de fader la bordure d'un élément à distance? Pour clarifier, cela doit être déclenché à partir de JavaScript et utiliser quelque chose comme JQuery for Animer n'est pas une option. Nous utilisons Sencha, mais il ne semble pas que vous puissiez animer quelque chose que la taille et la position de l'élément avec ExtJS. Je sais que CSS3 a une animation pratique, mais je ne trouve rien de même à mes besoins.


1 commentaires

Je suppose que vous pouvez toujours écrire votre propre fonction de la fonction de rétrécissement de la fonction à 0 et de la couleur fondue à transparent, si rien d'autre.


3 Réponses :


0
votes

Utilisez simplement les transitions CSS3

#id_of_element {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}


0 commentaires

22
votes

Quelque chose comme ça? XXX

Demo à http: // jsfiddle.net/gaby/bcn5c/1/


8 commentaires

Pour FADE OUT OUT, l'état de navigation Border-Color doit être transparent ou la couleur d'arrière-plan de l'élément parent.


De plus, tout en utilisant CSS3 Works, gardez à l'esprit que cela n'est pas compatible avec certains navigateurs - la toux - c'est-à-dire.


@Jkirchartz, réglage de l'opacité à 0 via RGBA est identique à transparent . Bien qu'il affiche toujours le même div fond s Élément dessous .. ( L'utilisation de la couleur de l'élément sous fonctionnerait mais pas si l'élément ci-dessous n'est pas une couleur unie .. )


@vonkly, très correct, bien que l'OP demande des transitions, alors je pensais qu'il était au courant .. bon point.


@ Gabyakag.petrioli oui, mais vous définissez la couleur à # FF0000 lorsque j'ai posté ce commentaire.


@Jkirchartz, ahh .. a du sens .. je l'ai édité immédiatement parce que je ne l'avais pas encore testé ..


@ Gabyakag.petrioli c'est la seule chose que je n'aime pas à propos de S.o., peu de chronométrage comme ça.


+1 Mais vous devriez toujours placer la propriété Standards en dessous de ses implémentations spécifiques au fournisseur.



2
votes

Gardez à l'esprit que les transitions ne fonctionnent pas dans Opera (11.62) si vous n'écrivez simplement à frontière-couleur . Vous devez spécifier les quatre frontières séparément: xxx

http://jsfiddle.net/ ds5bm /

Ceci est fixé dans l'opéra 12.


0 commentaires