+ Rispondi al messaggio
Visualizzazione dei risultati da 1 a 2 su 2

Animazioni CSS impostate con JS: introdurre pausa

  1. #1
    BennyB non è in linea Scolaretto
    Buongiorno.
    Ho creato un piccolo lavoro per realizzare un visualizzatore alternato di immagini con dissolvenza incrociata.
    Probabilmente, sarebbe più pratico far fare tutto a JS, ma volevo fare delle prove.
    Questa la parte HTML:
    codice HTML:
     <figure>
        	<h2>Example Using img tags</h2>
        	<div class="imagesContainer">
            <img class="fadeInClass" src="img/1.jpg" />
            <img src="img/2.jpg" />
            <img src="img/3.jpg" />
            <img src="img/4.jpg" />
          </di v>
        </figure>
    Questa la formattazione CSS relativa:
    codice HTML:
      .imagesContainer {
          width: 625px;
          height: 390px;
          position: relative;
          overflow: hidden;
          box-shadow: rgba(0,0,0,0.2) 10px 10px 10px;
          }
    
          .imagesContainer img {
          width: 625px;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          }
          .fadeOutClass {
            animation-name: fadeOut;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
          }
          .fadeInClass {
            animation-name: fadeIn;
            animation-duration: 4s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: linear;
            /* animation-delay: 3s; */
          }
    
          /* animation styles */
          @keyframes fadeIn {
          	0% { opacity: 0; }
          	33% { opacity: .3; }
          	66% { opacity: .7; }
          	100% { opacity: 1; }
          }
          @keyframes fadeOut {
          	0% { opacity: 1; }
          	33% { opacity: .7; }
          	66% { opacity: .3; }
          	100% { opacity: 0; }
          }
    Infine, questa la piccola routine JS:
           
        let images = document.querySelectorAll('img');
        let slideID = 0, slideNext = 1;
        window.onload = function() {
            myTimer = setInterval(slides, 4000);
        }
        let slides = function(){
          for (let i = 0; i < images.length; i++) {
            images[i].classList.remove('fadeOutClass');
            images[i].classList.remove('fadeInClass');
          }
          console.log(slideID, slideNext);
          slideID = slideID > 3 ? 0 : slideID;
          images[slideID].classList.add('fadeOutClass');
          images[slideNext].classList.add('fadeInClass');
          sleep(4000);
          slideID++;
          // slideNext = (slideNext + 1) > 3 ? 0 : slideNext++;
          if (slideNext + 1 > 3) {
            slideNext = 0;
          }else {slideNext++;}
        }
        function sleep(ms) {
          return new Promise(resolve => setTimeout(resolve, ms));
        }
    
    Il mio problema è che nel momento in cui io vado a chiamare la funzione sleep, questa non introduce alcuna pausa, ed io vorrei che, invece, si producesse un ritardo prima di passare al successivo FadeOut. Come mai? Ha a che vedere con l'ANIMATION di CSS?

  2. #2
    L'avatar di _alka_
    _alka_ non è in linea Very Important Person
    Quote Originariamente inviato da BennyB Visualizza il messaggio
    Il mio problema è che nel momento in cui io vado a chiamare la funzione sleep, questa non introduce alcuna pausa, ed io vorrei che, invece, si producesse un ritardo prima di passare al successivo FadeOut. Come mai?
    Credo che il problema risieda nella mancanza di un await che precede la chiamata alla funzione sleep(), e che fa sì che non venga attesa la "risoluzione" della Promise che viene generata dalla funzione legandola al timeout.

    Mi sembra però un modo un po' strano per gestire il processo: io userei direttamente le chiamate a setTimeout() quando serve e sfrutterei gli eventi messi a disposizione della API di animazione per ricevere gli eventi di interesse (ad esempio, quelli legati alla conclusione di un'animazione specifica in modo da avviare quella successiva, oppure pianificarla usando appunto setTimeout()).

    Ciao!
    ℹ️ Leggi di più su _alka_ ...

+ Rispondi al messaggio

Potrebbero interessarti anche ...

  1. [javascript] fare animazioni
    Da iacoposk8 nel forum HTML, CSS e JavaScript
    Risposte: 2
    Ultimo Post: 07-03-2010, 18:19
  2. [Javascript] Ricavare dimensioni immagine non impostate da tag IMG
    Da musiclover85 nel forum HTML, CSS e JavaScript
    Risposte: 0
    Ultimo Post: 16-12-2009, 16:22
  3. Introdurre pause
    Da newpc82 nel forum Visual Basic 6
    Risposte: 14
    Ultimo Post: 13-04-2007, 21:42
  4. Come inserire animazioni in Vb
    Da catullo76 nel forum Visual Basic 6
    Risposte: 4
    Ultimo Post: 14-06-2006, 10:16
  5. Introdurre ritardo
    Da bornslippy nel forum Visual Basic 6
    Risposte: 9
    Ultimo Post: 09-09-2005, 16:12