FadeIn e FadeOut: effetto dissolvenza

L'effetto dissolvenza, conosciuto anche come fadeIn e fadeOut a seconda che tale effetto termini rispettivamente con la visualizzazione o la scomparsa dell'elemento, è molto utilizzato nelle pagine web di molti siti per gli scopi più disparati come ad esempio la comparsa o la chiusura di un messaggio di informazioni o di conferma per una determinata azione effettuata. Con jQuery l'effetto è ottenibile con una sola riga di codice ma nel caso in cui non si voglia utilizzare tale libreria Javascript e magari l'unico effetto che ci serve è proprio quello della dissolvenza ed aggiungere la libreria diventerebbe uno spreco di risorse ed un inutile appesantimento delle pagine web è possibile ottenere lo scopo utilizzando Javascript puro.

Il blocco di codice seguente mostra come ottenere tale effetto utilizzando due funzioni una per il fadeIn e l'altra per il fadeOut. La funzione può essere sicuramente ottimizzata, volendo è possibile compattarla in una unica e gestire il toggle per la dissolvenza in entrata ed in uscita ma per gli scopi di questo articolo le due funzioni sono più che sufficienti per capire come tale effetto possa essere raggiunto avvalendosi del setTimeout e delle proprietà opacity e requestAnimationFrame:

<div id="container">
  <div id="target">www.michelepisani.it</div>
</div>
<div id="buttons_container">
  <button onclick="fadeInFunc()">Fade IN</button>
  <button onclick="fadeOutFunc();">Fade OUT</button>
</div>

<script type="text/javascript">
  function fadeInFunc() {
    var el = document.getElementById("target");
    el.style.opacity = 0; 
    var tick = function() {
      el.style.opacity = +el.style.opacity + 0.01;
      if (+el.style.opacity < 1) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
      }
    };
    tick();
  }

  function fadeOutFunc() {
    var el = document.getElementById("target");
    el.style.opacity = 1; 
    var tick = function() {
      el.style.opacity = +el.style.opacity - 0.01;
      if (+el.style.opacity > 0) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
      }
    };
    tick();
  }
</script>

Nel tab "Result" dell'esempio di seguito potete apprezzarne l'effetto dal vivo.