Comment utiliser transform:translateX pour déplacer un élément enfant horizontalement 100% à travers le parent

Tous,

J'aimerais être en mesure d'utiliser translateX pour animer un élément enfant 100% de la largeur de celle du parent (c'est à dire, à partir du bord gauche au bord droit).

Le défi est que les pourcentages dans translateX reportez-vous à l'élément lui-même, non pas le parent.

Ainsi, par exemple, si mon code html ressemble à ceci:

<div id="parent">
    <div id="child">
</div>

Et mon CSS comme ceci (vendeur-préfixes omis):

#parent {
    position: relative;
    width: 300px;
    height: 100px;
    background-color: black;
}
#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    transform: translateX(100%);
}

Cela ne fonctionne pas - l'enfant ne se déplace 20px (100% de lui-même), pas tout le chemin à travers le parent. (Vous pouvez le voir sur jsfiddle):

Comment utiliser transform:translateX pour déplacer un élément enfant horizontalement 100% à travers le parent

Je peux le faire:

#child {
    position: absolute;
    width: 20px;
    height: 100px;
    background-color:red;
    -webkit-transform: translateX(300px) translateX(-100%);
    transform: translateX(300px) translateX(-100%);
}

Cela fonctionne (vu ici de nouveau sur jsfiddle), parce qu'il les premiers mouvements de l'enfant 300px (toute la largeur de la société mère), moins 20px (la largeur de l'enfant). Toutefois, cela dépend du parent ayant un fixe, connu dimension en pixels.

Comment utiliser transform:translateX pour déplacer un élément enfant horizontalement 100% à travers le parent

Cependant, dans mon responsive design - je ne connais pas la largeur de la mère, et il va changer.

Je sais que je peux utiliser left:0 et right:0, mais l'animation de la performance de gauche/droite est bien pire que translateX (Merci Paul Irlandais!).

Est-il un moyen de faire cela?

Merci d'avance.

  • La seule façon que je peux penser serait d'avoir un wrapper autour de l'enfant, avec une largeur de 100%, et d'animer la place de l'enfant
  • L'animation de la width serait probablement subir le même rendement écueils que l'animation left, non?
  • Correct, marge/largeur/gauche ne sont pas de l'accélération GPU et nuire à la performance. Aller pour se transforme.
InformationsquelleAutor mattstuehler | 2014-02-04