Visualizzazione dei risultati da 1 a 2 su 2
  1. #1

    [Bootstrap] Chiudere modal con animazione

    ciao!

    mi hanno chiesto di creare un loading page che poi dopo un tot di secondi si chiude con questo effetto: https://www.mattepuffo.com/DOWNLOAD/test.mp4

    per creare il loading ho usato il modal di bootstrap, cambiando lo sfondo.
    il sole che gira ok, ed ho fatto questo:
    codice:
      <script>
        onload = (event) => {
          const lm = document.getElementById('loading_modal');
          const loadingModal = new bootstrap.Modal(lm, {
            keyboard: false
          });
          loadingModal.show();
          lm.classList.add("fade");
    
    
          setTimeout(function () {
            loadingModal.hide();
          }, 3000);
        };
      </script>
    
    
      <div id="loading_modal" class="modal" tabindex="-1">
        <div id="loading_modal_dialog" class="modal-dialog modal-fullscreen">
          <div class="modal-content">
            <div class="modal-body text-center">
              <img id="sole_modal" src="sole.svg" alt="">
            </div>
          </div>
        </div>
      </div>
    funziona tutto, tranne che sinceramente non so come ottenere quell'effetto di chiusura del modal.
    non sono costretto ad usare il modal di bootstrap ovviamente, ma prescindere non ho idea da iniziare!
    qualche aiuto?

  2. #2
    ok ho più o meno risolto:
    codice:
      <script>
        onload = (event) => {
          setTimeout(function () {
            document.getElementById('loading_modal').classList.add('modal_exit');
          }, 3000);
        };
      </script>
    
    
      <div id="loading_modal" class="my_modal" tabindex="-1">
        <div class="modal_body">
          <img id="sole_modal" src="<?php echo IMAGE; ?>sole.svg" alt="">
        </div>
      </div>
    css:
    codice:
    .modal_exit {
      -webkit-animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
      animation: puff-out-center 1s cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
    }
    
    
    @-webkit-keyframes puff-out-center {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
      }
    
    
      100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
      }
    }
    
    
    @keyframes puff-out-center {
      0% {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0px);
        filter: blur(0px);
        opacity: 1;
      }
    
    
      100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        -webkit-filter: blur(4px);
        filter: blur(4px);
        opacity: 0;
      }
    }
    ora ho un altro problema, ma magari ne parlo su un altro thread!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.