Existe-t-il un moyen d'animer en CSS le mouvement du texte après l'ajout de nouveaux éléments de texte ?

Question

J'essaie d'animer le mouvement du texte lorsque d'autres textes sont affichés sur la même ligne par le biais de style.display (et de faire apparaître le nouveau texte en fondu). Comment puis-je réaliser cela avec une animation CSS ?

document.getElementsByClassName("secondary")[0].style.display = "none";

function show() {
  document.getElementsByClassName("secondary")[0].style.display = "";
}

<div style="text-align: center;">
  <a class="primary" id="about" onclick="show();">text 1 </a>
  <a class="secondary" id="email">more text</a>
</div>

jsfiddle : https://jsfiddle.net/Ycmelon/g1bdvmpx/

résultat attendu : https://s3.gifyu.com/images/3dr3h5.gif )

Answer 1

Commencez par définir la largeur de .wrapper à la largeur de .primary . Ceci cachera le "plus de texte". Lorsque l'on clique dessus, la largeur de .wrapper à la largeur d'origine, et modifie l'opacité de l'élément .secondary .

const wrapper = document.querySelector('.wrapper');
const primary = document.querySelector('.primary');
const secondary = document.querySelector('.secondary');

const wrapperWidth = wrapper.getBoundingClientRect().width + 'px';
const primaryWidth = primary.getBoundingClientRect().width + 'px';

wrapper.style.width = primaryWidth;

wrapper.classList.add('ready'); // apply the transition to wrapper after the setting the base width

wrapper.addEventListener('click', () => {
  wrapper.style.width = wrapperWidth;
  secondary.style.opacity = 1;
});

.container {
  position: relative;
  text-align: center;
}

.wrapper {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
}

.ready {
  transition: width 1s;
}

.secondary {
  opacity: 0;
  transition: opacity 0.5s 1s;
}

<div class="container">
  <div class="wrapper">
    <a class="primary" id="about">text 1</a>
    <a class="secondary" id="email">more text</a>
  </div>

  <br>

  <div style="text-align: center">text 1</div> <!-- before -->
  <div style="text-align: center">text 1 more text</div> <!-- after -->
</div>