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):
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.
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'animationleft
, non? - Correct, marge/largeur/gauche ne sont pas de l'accélération GPU et nuire à la performance. Aller pour se transforme.
Vous devez vous connecter pour publier un commentaire.
Je n'ai pas posté mon idée à l'origine, car il s'agit de créer une autre couche HTML, et la meilleure des solutions à venir.
Car ce n'est pas arrivé, je lui explique mon commentaire. Ce que je voulais dire, c'est ceci:
Depuis l'emballage est 100% de la largeur de la mère, de la traduction il fonctionne à 100% comme prévu.
violon
Noter que l'emballage est en cours de traduction à 100% comme vous l'avez indiqué. Cependant, me semble que ce que vous voulez vraiment est de déplacer l'élément à 100% de la largeur. Pour ce faire, vous avez à traduire l'enfant, 100% (maintenant ce qui s'applique à l'enfant de largeur) dans la direction opposée.
Correction: l'enfant doit partager la transition de la propriété de l'emballage:
#child
est planait. Vous devez spécifier:hover
sur le#parent
pour éviter tous les problèmes: jsfiddle.net/Nprs7/65pointer-events: none;
de l'enveloppe et ensuitepointer-events: auto;
à l'enfant pour prévenir la répétition des questions.Il y a une super solution à ce problème à l'aide de Flexbox. La clé est de prendre avantage de la flex-grow propriété.
Dire que vous avez le code HTML qui ressemble à ceci:
Tout d'abord, donner .flex-conteneur de la base display: flex de la propriété, et de définir sa flex-direction à ligne. Définir le positionnement de l'enfant des éléments de relative, de sorte qu'ils vont s'asseoir les uns à côté des autres à l'intérieur .flex-conteneur.
Par défaut, le flex-grow propriété est définie à 0, ce qui est exactement ce que nous voulons au début. Cela signifie que .flex-entretoise et .curseur n'ont que leurs normales dimensions pour commencer. Nous avons simplement garder .flex-entretoise vide, et il aura une largeur de 0.
Maintenant pour l'animation. Nous avons seulement besoin de deux règles CSS pour le faire fonctionner: ajouter un transition pour .flex-entretoise et de définir flex-grow à 1 sur .flex-entretoise lors de certains événements. La deuxième règle donne toutes les inutilisé largeur à l'intérieur .flex-conteneur à la largeur de .flex-entretoise, et la première règle anime la modification de la largeur. L' .élément curseur est poussé le long du bord de .flex-conteneur.
Le CSS ressemble à quelque chose comme ça - j'ai ajouté un arrière-plan .flex-entretoise de sa présence un peu plus évident, et l'ensemble flex-grow à 1 lorsque l'utilisateur survole .flex-conteneur:
CSS:
HTML:
Flexbox c'est assez configurable, trop. Par exemple, disons que nous voulons .curseur pour se déplacer de droite à gauche, à la place. Tout ce que nous avons à faire est de basculer le flex-direction propriété dans .flex-conteneur à de la ligne inverse, et nous y sommes!
N'hésitez pas à jouer avec elle dans ce stylo.
Garder à l'esprit que les choses peuvent devenir un peu plus difficile, si nous voulons animations pour différents types d'événements. Par exemple, je suis tombé sur ce problème lorsque j'essaie d'animer une étiquette lorsqu'un utilisateur tape dans l'élément input. Un peu plus de HTML et CSS est nécessaire pour le faire fonctionner (j'ai utilisé des JS, en tant que bien), mais le concept est le même.
Voici un autre stylo, cette fois dans le contexte d'un formulaire avec un input.
Si vous utiliser le wrapper-solution (comme dans d'utilisateur vans' approche), je préfère de référence de 1% au lieu de 100% de la société mère de la largeur et de multiplier le traduit la valeur par 100. De cette façon, vous éviter les problèmes avec les éléments cliquables côté de l'élément enfant.
E. g, si vous voulez traduire votre enfant de l'élément au centre de la relation parent-élément:
html
http://codepen.io/anon/pen/BLxYXO