Nous saluons le retour.
Donc, quand j'ai présenté initialement Jay queery, j'ai mentionné qu'il nous aide à faire des choses comme sélectionner les éléments de les manipuler dans les auditeurs d'événements.
Et j'ai également mentionné qu'il aide avec les effets et les animations.
Donc, dans cette vidéo je vais faire un aperçu rapide de certains de ceux construits dans les effets en particulier, je vais montrer deux grandes catégories d'effets de décoloration effets et diapositives.
Donc je suis sur les docks Jay Corey ici sur la catégorie des effets.
Vous pouvez voir qu'il ya quelques méthodes qui ont à voir avec les effets et je vais commencer par montrer les effets de fondu, donc je vais regarder à fondu pour commencer.
Qu'est-ce fadeout fait, vous sélectionnez un élément avec un signe dollar ou un ensemble d'éléments et que vous appelez qui fade out sur elle et il va animer cet élément de pleine opacité vers le bas à pleine transparence ou zéro opacité.
Donc, il fondamentalement fondu un élément et vous pouvez fournir une durée si vous voulez qu'il soit lent ou rapide ou très lent.
Vous pouvez fournir un nombre de millisecondes.
La valeur par défaut est 400 millisecondes et puis vous pouvez fournir un rappel pour exécuter à la fin que je vais montrer dans un instant.
Donc, je vais faire un nouveau fichier ici pour démontrer cette démonstration étude d'effet et je vais simplement copier sur notre structure de la dernière page de démonstration et celui-ci appellera J effets Querrey.
Donc, nous avons mis en place et je vais me débarrasser de tout ce contenu ici et puis je vais ajouter dans quelques divs.
Faisons trois divs et nous allons utiliser ces divs et les faner et les animer et les glisser vers le haut et vers le bas.
Et donc je vais leur donner du contenu à l'intérieur de ce premier sera ceux-ci ne me fade pas le prochain.
Je vous supplie s'il vous plaît.
Et puis enfin, nous aurons un qui dit Aide aider à aider.
Donc ces divs sont désespérés de ne pas être fané loin.
Malheureusement aujourd'hui n'est pas leur jour de chance.
Et nous allons les combattre.
Donc, pour rendre cela plus clair, je vais ajouter un peu de style ici à notre vie afin qu'ils aient une couleur que nous pouvons voir disparaître.
Et ils ont aussi une largeur et une hauteur que nous pouvons voir glisser vers le haut et vers le bas.
Donc, je vais sélectionner tous les divs et leur donner un avec 100 pixels et une hauteur de 100 pixels et un fond de couleur de sarcelle d'hiver et nous allons sauver et nous allons ouvrir ce.
Nous avons trois divs.
Cependant, je voudrais qu'ils soient sur la même ligne.
Donc, une façon de le faire est de laisser le flotteur à gauche.
Maintenant, ils sont tous dans la même ligne, mais ils se saignent les uns dans les autres.
Donc, pour fixer que nous pouvons ajouter une marge.
Nous allons donc faire une marge de 20 pixels sur tous les côtés.
Maintenant, nous nous retrouvons avec trois carrés et ils ont chacun un texte à l'intérieur et nous n'avons vraiment pas besoin d'aller au-dessus de leur style, car tout ce que nous allons faire est de démontrer comment nous pouvons les adapter à l'intérieur et à l'extérieur.
Donc, nous allons ajouter un bouton en haut ici et ce bouton va juste dire cliquez sur moi.
Et quand nous cliquons sur ce bouton, ce qui se passera, c'est que nos animations seront exécutées.
Alors je clique sur ce et ces trois éléments doivent fondu pour commencer.
Donc, pour répéter fade out prendra un élément de toute l'opacité ou quelle que soit l'opacité Il est actuellement à et faded au point de la transparence totale.
Donc, il ressemble à ce fadeout point de sélection et nous pouvons fournir une chaîne facultative de la vitesse si lente ou rapide ou nous pouvons lui donner un nombre de millisecondes.
Alors laissez-moi vous montrer cela maintenant.
Je vais réellement faire ceci dans un dossier séparé ainsi je vais faire un dossier de javascript et sauver.
Je vais l'appeler affecte juste le génie sauver le coffre-fort qui avait mon alerte reliée et a relié ceci ensemble correctement le bas.
Il suffit d'ajouter une balise de script.
La source est égale aux effets.
Oui.
Et si nous rafraîchissons nous obtenons notre alerte connectée.
Donc, ce que nous voulons faire ici est Faid ces divs out.
Donc nous devons sélectionner le périphérique juste comme ça et ne pas fondu.
Et puis nous pouvons fournir une vitesse ou tout simplement laisser comme ça.
Et si c'est tout ce que nous voulons faire ou rafraîchir et vous pouvez voir que la page charge, ils commencent à disparaître.
Donc, nous allons faire que cela arrive lorsque nous cliquons sur le bouton.
Donc, nous allons vouloir faire un point dollar signe point et nous pouvons soit faire un clic ou je vais faire sur le point rapide et ensuite passer dans notre fonction de rappel.
Donc, quand nous cliquons, puis fade out tous les divs juste comme ça et maintenant va rafraîchir et si je clique, vous pouvez voir qu'ils se fanent tous.
Donc, comme je l'ai mentionné, nous pouvons fournir un nombre ici quelque chose comme 1000 qui est une seconde complète.
Et si je rafraîchis, vous verrez quand je clique, il prend une seconde complète pour eux à fondu.
Un point important à propos de fadeout est que si je inspecter la page ici et je regarde les éléments sont divs sont toujours dans l'équipe soit encore dans le dortoir.
Nous ne les voyons pas car leur affichage n'a été défini à aucun.
Il ne les supprime pas ou ne les supprime pas de la page.
C'est juste de les cacher.
Et c'est certainement une distinction importante.
Alors disons que je voulais juste imprimer un message une fois que les divs s'étaient évanouis, donc je les fanerais et puis faire quelque chose comme ce fondu terminé car il a annulé log.
Et si je lance ce que je vais ouvrir la console et regarder l'ordre que les choses se produisent.
Donc, quand je clique ici, je reçois Faid terminé avant que le fondu est effectivement fait.
Donc, ce qui se passe ici, c'est que nous sélectionnons toutes les divs et nous commençons le fade out, mais il prend une seconde entière.
Et javascript n'attend pas cette seconde pour terminer avant de passer à la ligne suivante.
Il s'est immédiatement déplacé sur cette ligne et imprime Faid terminé et puis le fondu finit.
Donc, si nous voulons que le code se produise juste après la fin de finition, nous voulons qu'il soit garanti pour être après que nous pouvons passer un rappel ici.
Et donc ce rappel sera appelé à l'intérieur de la fadeout automatiquement quand il est fait.
Donc je vais déplacer notre journal constant là et sauver.
Et si je rafraîchir et maintenant je clique sur les finitions de fondu et puis nous obtenons 3 Fade terminé les journaux de point de console pour chacun de ceux.
Un scénario plus commun plutôt que d'imprimer simplement une chaîne dans le consul est de supprimer réellement les éléments une fois que nous les fanons.
Donc, j'ai mentionné qu'ils sont juste cachés, ils ne sont pas réellement disparu.
Et si nous voulions les supprimer comme sur notre liste à faire que nous allons construire lorsque nous cliquons sur la poubelle à côté d'un élément, nous voulons qu'il fade out lentement faire une belle animation.
Mais ensuite, il suffit de supprimer la page entièrement hors du DOM.
Donc, nous devons utiliser une méthode appelée supprimer et nous voulons seulement le supprimer après le fondu est terminé.
Donc, cela ressemble à ceci va juste faire cette suppression.
Et ce que cela va faire est d'attendre jusqu'à ce que le fondu est terminé.
Et pour chaque div il va exécuter la méthode Remove sur elle.
Alors rafraîchissez et cliquez sur cliquez sur moi.
Ils se fanent et puis si nous passons à des éléments que vous pouvez voir que notre corps a seulement un bouton maintenant et un tag tous les divs sont complètement disparu.
Et si je commenter cette ligne et actualiser, vous pouvez voir où ils commencent ici trois divs et je clique sur le bouton et tout ce qui se passe.
Ils s'effacent, puis l'affichage est défini à aucun.
Donc, si je mets mon code au mauvais endroit et j'ai couru la méthode Remove ici, j'ai fait tous les divs dot supprimer juste comme ça.
Ce qui se passerait réellement, c'est que l'ordre n'est pas garanti.
Et cela va prendre une seconde entière.
Et ce code n'attendra pas cette seconde pour terminer.
Donc, il va commencer à s'estomper et ensuite exécuter supprimer immédiatement après.
Donc, cela finit par ressembler à ceci où il commence à s'estomper et juste immédiatement après qu'il les supprime.
Donc, il est fondamentalement pas de fondu à tous.
C'est pourquoi J.
Corey fournit ce rappel parce qu'il est assez fréquent pour nous de vouloir faire quelque chose après que nous fanion quelque chose ou après nous glisser quelque chose vers le bas ou quelle que soit l'animation est.
Cela me ramène à mon point suivant, c'est-à-dire que je veux montrer quelques-unes des autres animations que nous pouvons faire afin que nous puissions aussi faire disparaître les choses.
Donc, si je définis l'affichage d'être aucun au début comme ça et je rafraîchir.
Nous ne voyons pas les divs parce que maintenant ils sont cachés plutôt que de les évanouir quand nous cliquons, nous pouvons les faire fondre dans et il fonctionne comme vous attendez.
Cliquez sur le bouton et ils fondu plus d'une seconde, puis si nous voulons exécuter un code après, quand nous savons qu'ils sont faits fondu dans nous pouvons mettre un code et dit si le rappel ici.
D'accord, c'est Faden.
GK fournit une méthode de fade plus belle qui est appelée Faid basculer et basculer Faid fonctionne de la même manière.
Je fournis un certain nombre de millisecondes et il saura si elle a besoin de fondu quelque chose dans ou hors selon si elle est actuellement en montrant ou non.
Donc, si je rafraîchir et je clique sur Fade basculer, il commence par les nourrir tous dans puis les évanouir tous en arrière et en arrière.
C'est essentiellement comme l'ajout d'une classe à la liste de classe ou en utilisant la classe basculante avec Jay Querrey où il décide juste si elle a besoin de fondu ou de fondu.
Très bien pour que la disparition de la prochaine série d'effets que je veux démontrer sont ces effets glissants.
Donc, ici, nous avons une diapositive glisser vers le bas et glisser vers le haut.
Donc, je vais commencer par glisser vers le bas et ce qu'il fait, c'est qu'il prend un élément qui n'est pas actuellement montrant plutôt que d'animer l'opacité sur un élément comme Faid fait-il réellement anime la hauteur d'un élément.
Alors je vais vous montrer comment ça marche.
Nous allons changer cela.
Plutôt que de basculer, nous allons glisser vers le bas.
Et c'est parce que quand nous rafraîchissons nos éléments sont cachés.
Donc, si je cours glisser vers le bas lorsque nous cliquons sur un bouton, vous verrez que la hauteur est animée vers le bas et la même chose va pour glisser vers le haut.
Il fait le contraire.
Donc, si je me débarrasse de l'affichage sur afin qu'ils montrent.
Et maintenant je clique sur le bouton.
Leur hauteur est animée et ils glissent vers le haut, puis l'affichage est réglé sur Aucun à la fin.
Et l'autre méthode est slide toggle qui fonctionne tout comme Faid basculer où il décide quoi faire.
Donc, si je clique, ils glissent vers le haut et maintenant glisser vers le bas et de dos en haut et en bas.
Donc, c'est tout ce qu'il ya à glisser vers le haut glisser vers le bas et glisser alterner.
Ils étaient juste comme ils sont Faid méthodes analogiques.
Il ya aussi un rappel facultatif que nous pouvons transmettre.
Donc, si nous donnons une durée comme 1 seconde et puis je peux récupérer mon appel.
Et je vais faire une autre escroquerie. Que le journal à la fin de la diapositive est fait.
Et cela ne sera imprimé qu'une fois la deuxième diapositive complète terminée.
Alors je rafraîchis.
Regardons la console et ils cliquent sur me cliquer et vous pouvez voir cela seulement imprimé une fois la diapositive a été fait.
La même chose ici prête attention ici.
Cela changera à six.
Voilà.
Mais encore une fois un modèle plus commun est d'enlever les articles une fois que nous les avons glissés ou fade-les ou tout ce que nous avons fait est de les supprimer.
Donc ici il faudra une seconde pour les glisser et ensuite ils sont retirés de la page.
Et si nous allons à l'onglet éléments notre corps est vide à l'exception de ce bouton et le script.
Donc j'espère qu'ils vous donneront une bonne idée de la façon dont certains des effets dans une carrière de travail.
Ce sont de loin les plus fréquents décoloration et glissement.
Et nous allons les utiliser au lieu de notre application de liste de tâches que nous allons commencer dans la prochaine vidéo.