Starten Sie den CSS3-Übergang nach der Benutzersicht?

Question

Ich habe eine CSS3-Animation oben auf meiner Homepage, die startet, sobald die Seite geladen wird. Das Problem ist, wenn der Benutzer diese Seite in einer neuen Registerkarte öffnet, sie aber nicht sofort anzeigt, wird die Animation abgespielt, obwohl sie diese Seite nicht anzeigt.

Gibt es eine Möglichkeit, die Animation erst zu starten, nachdem der Benutzer diese Seite aufgerufen hat?

Wie wenn Sie ein Youtube-Video in einem anderen versteckten Tab öffnen, wird es nicht automatisch abgespielt, bis Sie diesen Tab öffnen. Und auch tut CodePen das gleiche, wenn Sie einen Stift in einem neuen Tab öffnen beginnen werde nicht, bis Sie sehen, dass Tab

Answer 1

Sie verlassen nun die Sichtbarkeit api verwenden möchten: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API?redirectlocale=en-US&redirectslug=DOM%2FUsing_the_Page_Visibility_API

Insbesondere sollten Sie die document.hidden Eigenschaft und der visibilitychange Ereignis. Sie können diese verwenden, um Ihre Klassen dynamisch zu ändern, wenn die Eigenschaft document.hidden falsch ist.

Answer 2

Als mentioned there können Sie überprüfen, wenn das Fenster fokussiert ist, d. H. Benutzer geklickt (aber nicht angezeigt) es. Wie würdest du es umsetzen?

Sie wählen eine ID/Klasse/Tag, was auch immer. Gestalte es, auch mit Animationen. Sobald dieses Fenster fokussiert ist, wenden Sie die ID/Klasse auf ein Element an oder erstellen ein neues Element mit dem Tag/id/class. Nachdem die Klasse hinzugefügt wurde, heben Sie entweder die onfocus-Funktion auf oder überprüfen sie über eine Variable, die für diesen Zweck erstellt wurde.

Beispiel:

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>

Eine weitere Option: Sie können die Funktion zum onscroll Ereignis gelten auch, das heißt, wenn der Benutzer die Seite zu blättern beginnt.