web-dev-qa-db-fra.com

Est-il possible de faire la transition de l'alignement du texte en utilisant CSS3 uniquement?

Est-il possible de faire la transition de l'alignement du texte en utilisant css3? Par exemple, j'aimerais animer l'alignement du texte de gauche à droite, cependant, l'ajout d'une propriété de transition sur l'alignement du texte ne fait pas l'affaire.

http://codepen.io/anon/full/lGDwB

css3css-transitions
19
Adam Soffer

J'ai découvert un moyen non seulement d'animer de gauche à droite/de droite à gauche, mais aussi à partir d'un texte centré.

L'astuce consiste à appliquer une largeur de "0".

ul { 
  background: #fff;
  padding: 16px;
  border: 1px solid #e2e2e2;
}
 
li {
  list-style: none;
  letter-spacing: 1px;
  font: 12px 'Tahoma';
  line-height: 24px;
  color: #444;
  text-align: center;
  white-space: nowrap;
  width: 100%;
  transition: width .8s ease;
}

ul:hover > li {
  width: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
<ul>
  <li>this</li>
  <li>is a list</li>
  <li>of entries</li>
  <li>with various widths.</li>
  <li>hover over it</li>
  <li>to apply crazy css magic!</li>
</ul>
</body>
</html>

https://jsfiddle.net/q5kLcfkx/4/

53
Christoph Bühler

Si je comprends ce que vous cherchez, une façon de le faire est de changer un peu votre mise en page et d'animer les propriétés gauche/droite:

CodePen de travail

Cela profite du débordement visible en définissant le right de l'élément span sur le côté gauche de l'écran.

En survol , right est défini sur 0, la transition de l'élément sur l'écran.

Remarque: dans ce cas, lors de la transition vers la gauche, vous perdez un peu de l'assouplissement car il passe complètement à zéro plutôt que la largeur naturelle du texte.

.bg {
  background: black;
  width: 100%;
  height: 20px;
  position: relative;
}

.name {
  color: white;
  left: 0;
  position: absolute;
  text-align: right;
  right: 100%;
  -webkit-transition-property: all;
  -webkit-transition-duration: 2s;
}

.bg:hover .name {
  position: absolute;
  right: 0;
  left: 0;
}
<div class="bg">
  <span class="name">Adam</span>
</div>
14
dc5

C'est une vieille question mais j'ai récemment eu le même problème et j'ai trouvé les réponses ici insatisfaisantes pour mon cas d'utilisation.

La plus grande préoccupation que j'ai avec la solution de dc5 est qu'elle utilise les propriétés de position lente pour l'animation, ce qui est mauvais pour les transitions car elles nécessitent une réorganisation et ne sont pas accélérées par le matériel.

Ma solution est uniquement basée sur transform: transitionX() et exploite le fait que translate() est toujours basé sur la largeur/hauteur de l'élément cible:

Voici ma solution:

setTimeout(function() {
  $('.b').addClass('left');
}, 5000);
.b {
  transform: translateX(50%);
  transition: transform ease-in-out 1000ms;
}
.c {
  display: inline-block;
  transform: translateX(-50%);
  background: green;
  transition: transform ease-in-out 1000ms;
}
.b.left,
.b.left .c {
  transform: translateX(0%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="b">
  <div class="c">CENTERED TEXT</div>
</div>
5
Leo Selig

Vous pouvez aligner le texte à droite et augmenter la largeur du conteneur.

Voici un exemple: CodePen

HTML:

<div class="bg">
  <div class="name">Adam</div>
</div>

CSS:

.bg {
  background: black;
}
.name {
  color: white;
  text-align: right;
  width: auto;
  display: inline-block;
  -webkit-transition-property: width;
  -webkit-transition-duration: 2s;
}
.bg:hover .name {
  width: 100%;
}
4
Martin Tale

La façon dont je le fais est simplement d'utiliser text-indent au lieu de text-align. Vous devez faire un essai/erreur un peu pour déterminer le nombre de px, rem, em,%, ou quoi que vous souhaitiez déplacer l'élément via le retrait de texte.

.tsetup
{
text-indent:0;
transition: text-indent 150ms linear;
}

.tright
{
text-indent:50px; /* adjust me by trial and error */
}

Je peux donc ajouter la classe tsetup à mon élément. Lorsque je clique dessus, j'ajoute la classe tright. Lorsque je clique à nouveau dessus, je supprime la classe tright. Il fait un joli fondu progressif de gauche à droite.

J'utilise cette technique avec le FontAwesome fa-circle icône (content:"\f111";font-family:FontAwesome;) pour faire en sorte que la case à cocher bascule le curseur.

2
Volomike