wanderings/content/posts/transition.md

+++ tite = "transitions css" date = 2020-04-13 tags = ["html"]

layout: code

+++

Voilà un sujet délicat. Les transitions permettent de changer un paramètre de manière progressive sur un temps donné.

Pour créer ces effets avec accélération matérielle, il faut les écrire comme effets css. Il y a pour ça les paramètres transitionProperty et transitionDuration, avec le paramètre abrégé transition. La transition est déclenchée la prochaine fois qu'un élément prend la classe impliquée. Par exemple :

<script>
  function move_span() {
    let span = document.querySelector("#movableSpan");
    if(span.classList.contains('slided')) {
      span.classList.remove('slided');
    } else {
      span.classList.add('slided');
    }
  }
</script>
<style>
  #movableSpan {
    position: relative;
    top: 0;
    left: 0;
    transition: 1s;
  }
  .slided {
    transition: 1s;
    top: 5em !important;
  }
</style>
<div>
  <button onclick="move_span()">bouger le span 1</button>
  <span id="movableSpan" >
    texte du span 1
  </span>
  <span>
    texte du span 2
  </span>
</div>

[la suite]({{% relref transition-2 %}})

{{< html_preview >}}