Comment ajouter une animation de retard à l'aide de l'Animer.css et ViewportChecker?
Je suis en train d'ajouter un "retard" animés différents éléments de classe sur une page web en particulier à l'aide de Daniel Eden animer.css version 3.5.1 et jquery-fenêtre-vérificateur de version 1.8.7 par Dirk Groenen.
J'ai essayé d'utiliser la Fonction setTimeout comme ...
setTimeout(function () {
jQuery('.fadeinleft1').addClass("hidden").viewportChecker({
classToAdd: 'visible animated fadeInLeft',
offset: 100
});
}, 500
);
Mais qui affecte évidemment la classe caché. J'ai besoin juste de l'animation retard comme il arrive à la fenêtre et je peux retard de chaque objet. Été à la recherche de quelque temps, et juste ne peut pas trouver la réponse pour le moment.
OriginalL'auteur James | 2016-08-26
Vous devez vous connecter pour publier un commentaire.
Allez comprendre, dès que je pose une question, j'ai trouver une solution qui ne dépend que de l'ajout de css. Ne pas besoin de toucher au javascript. Façon très rapide et facile à réaliser retard de l'animation lors de l'utilisation de l'animer.css et fenêtre-checker. Vous n'par l'ajout d'une classe css qui utilise "animation-delay."
Javascript:
Créer les suivants animé retard css toutefois vous voulez et autant que vous voulez et vous pouvez les utiliser à l'échelle mondiale sur toutes les animations:
Puis tout ce que vous devez faire est d'ajouter les classes à l'animation des éléments en tant que tels:
Qui est!
OriginalL'auteur James
Je ne suis pas tout à fait sûr de savoir pourquoi vous utilisez
viewportChecker()
, ou n'importe quel javascript/jQuery. La solution que vous avez posté est l'utilisation de jQuery pour ajouter lehidden
classe css à votre élément (hidden
a été remplacé pard-none
de Bootstrap 4), mais cela est inutile, car laanimated
classe de traiter automatiquement pour vous. L'objectif de l'Animer.css est efficace, transparente animations sans superflu javascript/jQuery.Parce Que Les Animer.css utilise le
animation(-name)
propriété css pour animer les éléments, il respecte donc laanimation-delay
propriété css. Votre solution doit fonctionner même si vous supprimer entièrement le code jQuery (comme expliqué ci-dessus).OriginalL'auteur Chad