Avvia la transizione CSS3 dopo la pagina delle visualizzazioni utente?

Question

Ho un'animazione CSS3 nella parte superiore della mia home page che verrà avviata non appena la pagina verrà caricata. Il problema è che se l'utente apre quella pagina in una nuova scheda ma non la visualizza subito, l'animazione verrà riprodotta anche se non sta visualizzando quella pagina.

C'è un modo per avviare l'animazione solo dopo che l'utente ha quella vista quella pagina?

Un po 'come se si aprisse un video di YouTube in un'altra scheda nascosta non verrà riprodotto automaticamente finché non si apre la scheda. E anche CodePen fa lo stesso se si apre una penna in una nuova scheda che non comincerà fino a quando si visualizza tale scheda

Answer 1

Ti consigliamo di utilizzare l'API di visibilità: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

In particolare, si desidera che la document.hidden e l'evento visibilitychange. È possibile utilizzarli per modificare dinamicamente le classi quando la proprietà document.hidden è falsa.

Answer 2

Come mentioned there, è possibile controllare quando la finestra è a fuoco, ovvero l'utente ha fatto clic su (ma non visualizzato però). Come lo implementeresti?

Scegli un ID/classe/tag, qualunque sia. Stile, anche con animazioni. Una volta focalizzata la finestra, si applica id/class a un elemento o si crea un nuovo elemento con il tag/id/class. Dopo l'aggiunta della classe, si annulla la funzione onfocus o si verifica tramite una variabile creata per questo scopo.

Esempio:

window.onfocus=function(){ 
 
    window.onfocus=null; 
 
    document.getElementById("toBeAnimated").className="animatable"; 
 
}

#toBeAnimated{ 
 
    font-size:25px; 
 
} 
 
.animatable{ 
 
    transition: background-color 250ms linear; 
 
    background-color:black; 
 
    transition: color 250ms linear; 
 
    color:white; 
 
}

<div id="toBeAnimated">Focus on the snippet to animate me!</div>

Un'altra opzione: è possibile applicare la funzione all'evento onscroll anche, vale a dire quando l'utente inizia a scorrere la pagina.