Glisser dans un élément fixe à l'aide de transitions CSS3

J'ai un élément fixe de la position et de la largeur auto (auto largeur) qui devrait glisser à partir de la gauche.

J'ai défini deux états: caché et visible. Lorsqu'il est visible, il doit être positionné sur le côté gauche de la fenêtre, quand caché, il devrait être juste à l'extérieur de la vue.

État Visible

left: 0;
/* right: auto; */

État caché

right: 100%;
/* left: -element auto width */

Ces deux états d'affichage ok lorsque la transition est statique, sans aucune animation.

Variante 1: CSS3 transforme

J'ai aussi essayé d'utiliser CSS3 transforme, qui fonctionne, mais j'ai peur de la croix-navigateur différences. Lorsque les transitions ne sont pas pris en charge de transition serait de revenir automatiquement à la transformation de la statique, mais si j'utilise CSS3 transforme, il n'y a pas de direct de repli. Il doit être explicitement défini.

C'est un travail de démonstration de l'effet en utilisant des transitions CSS3 et transforme. Comme vous pouvez le voir, la largeur de la barre de gauche est large comme beaucoup comme il se doit et elle glisse juste au-delà du bord gauche, quand nous allons dans caché état.

Variante 2: Effondrement de l'élément de largeur

Cela pourrait en quelque sorte être fait par la manipulation de l'élément de largeur (tout en utilisant également des max/min largeur de charge automatique de la largeur), mais le problème, c'est que le contenu ne bouge pas. Il est évident que la largeur de l'élément est en cours de manipulation.
Nous avons pour déplacer l'élément, y compris son contenu.

Question

Est-il un moyen d'éviter CSS3 tranforms tout en satisfaisant les règles suivantes:

  • largeur doit être auto
  • lorsqu'il est visible qu'elle est positionnée sur la gauche au bord de la fenêtre
  • caché il est placé juste à l'extérieur du bord gauche
Basculer entre left:-100% et left:0px; avec javascript
La même chose pourrait être fait sans Javascript. Mais -100% est ok comme qui déplace l'élément au-delà de bord de la fenêtre.
Désolé, mais je dois poser la question: Vous voulez diaporama de l'élément à l'aide de CSS, mais vous ne voulez pas utiliser les transitions/transforme, en raison de certains anciens navigateurs? Pourquoi ne pas utiliser un JavaScript de secours, qui anime le dit d'une propriété CSS pour les navigateurs qui ne prennent pas en charge les transitions? Ou peut-être que j'ai mal interpréter votre question.
J'ai fondé mon commentaire sur "quand caché il est placé juste à l'extérieur du bord gauche"
Je veux utiliser les transitions, mais pas transforme. Les navigateurs qui ne supportent pas les transitions de secours pour les non-animés de changement d'état. Mais si j'utilise transforme il n'y a pas de secours, de par leur conception. Ai-je fait moi-même assez clair?

OriginalL'auteur Robert Koritnik | 2013-09-12