1
00:00:00,330 --> 00:00:01,500
Nous saluons le retour.

2
00:00:01,500 --> 00:00:08,820
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.

3
00:00:08,930 --> 00:00:11,990
Et j'ai également mentionné qu'il aide avec les effets et les animations.

4
00:00:12,180 --> 00:00:22,000
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.

5
00:00:22,250 --> 00:00:26,220
Donc je suis sur les docks Jay Corey ici sur la catégorie des effets.

6
00:00:26,280 --> 00:00:36,010
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.

7
00:00:36,570 --> 00:00:49,470
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é.

8
00:00:49,500 --> 00:00:57,380
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.

9
00:00:57,510 --> 00:00:59,690
Vous pouvez fournir un nombre de millisecondes.

10
00:00:59,700 --> 00:01:06,630
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.

11
00:01:06,780 --> 00:01:18,660
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.

12
00:01:18,960 --> 00:01:27,000
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.

13
00:01:27,120 --> 00:01:34,340
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.

14
00:01:34,450 --> 00:01:45,470
Et donc je vais leur donner du contenu à l'intérieur de ce premier sera ceux-ci ne me fade pas le prochain.

15
00:01:45,900 --> 00:01:48,300
Je vous supplie s'il vous plaît.

16
00:01:48,660 --> 00:01:52,380
Et puis enfin, nous aurons un qui dit Aide aider à aider.

17
00:01:52,720 --> 00:01:55,790
Donc ces divs sont désespérés de ne pas être fané loin.

18
00:01:56,040 --> 00:01:58,210
Malheureusement aujourd'hui n'est pas leur jour de chance.

19
00:01:58,410 --> 00:02:00,230
Et nous allons les combattre.

20
00:02:00,240 --> 00:02:06,720
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.

21
00:02:07,110 --> 00:02:10,900
Et ils ont aussi une largeur et une hauteur que nous pouvons voir glisser vers le haut et vers le bas.

22
00:02:10,950 --> 00:02:28,150
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.

23
00:02:28,860 --> 00:02:30,420
Nous avons trois divs.

24
00:02:30,420 --> 00:02:32,570
Cependant, je voudrais qu'ils soient sur la même ligne.

25
00:02:32,880 --> 00:02:36,900
Donc, une façon de le faire est de laisser le flotteur à gauche.

26
00:02:37,020 --> 00:02:39,880
Maintenant, ils sont tous dans la même ligne, mais ils se saignent les uns dans les autres.

27
00:02:40,200 --> 00:02:43,020
Donc, pour fixer que nous pouvons ajouter une marge.

28
00:02:43,020 --> 00:02:46,850
Nous allons donc faire une marge de 20 pixels sur tous les côtés.

29
00:02:46,860 --> 00:02:56,740
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.

30
00:02:57,060 --> 00:03:03,060
Donc, nous allons ajouter un bouton en haut ici et ce bouton va juste dire cliquez sur moi.

31
00:03:03,270 --> 00:03:08,000
Et quand nous cliquons sur ce bouton, ce qui se passera, c'est que nos animations seront exécutées.

32
00:03:08,220 --> 00:03:12,760
Alors je clique sur ce et ces trois éléments doivent fondu pour commencer.

33
00:03:13,320 --> 00:03:22,500
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.

34
00:03:22,500 --> 00:03:33,370
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.

35
00:03:33,390 --> 00:03:34,490
Alors laissez-moi vous montrer cela maintenant.

36
00:03:34,740 --> 00:03:39,870
Je vais réellement faire ceci dans un dossier séparé ainsi je vais faire un dossier de javascript et sauver.

37
00:03:40,250 --> 00:03:52,470
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.

38
00:03:52,470 --> 00:03:54,020
Il suffit d'ajouter une balise de script.

39
00:03:54,480 --> 00:03:56,450
La source est égale aux effets.

40
00:03:56,560 --> 00:03:57,320
Oui.

41
00:03:57,690 --> 00:04:01,030
Et si nous rafraîchissons nous obtenons notre alerte connectée.

42
00:04:01,350 --> 00:04:04,380
Donc, ce que nous voulons faire ici est Faid ces divs out.

43
00:04:04,380 --> 00:04:10,040
Donc nous devons sélectionner le périphérique juste comme ça et ne pas fondu.

44
00:04:10,380 --> 00:04:13,290
Et puis nous pouvons fournir une vitesse ou tout simplement laisser comme ça.

45
00:04:13,290 --> 00:04:20,630
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.

46
00:04:20,640 --> 00:04:23,740
Donc, nous allons faire que cela arrive lorsque nous cliquons sur le bouton.

47
00:04:24,090 --> 00:04:38,480
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.

48
00:04:38,640 --> 00:04:50,870
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.

49
00:04:50,980 --> 00:04:56,060
Donc, comme je l'ai mentionné, nous pouvons fournir un nombre ici quelque chose comme 1000 qui est une seconde complète.

50
00:04:56,260 --> 00:05:02,370
Et si je rafraîchis, vous verrez quand je clique, il prend une seconde complète pour eux à fondu.

51
00:05:02,620 --> 00:05:12,400
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.

52
00:05:12,430 --> 00:05:15,760
Nous ne les voyons pas car leur affichage n'a été défini à aucun.

53
00:05:15,760 --> 00:05:18,730
Il ne les supprime pas ou ne les supprime pas de la page.

54
00:05:18,910 --> 00:05:20,010
C'est juste de les cacher.

55
00:05:20,170 --> 00:05:22,890
Et c'est certainement une distinction importante.

56
00:05:22,990 --> 00:05:35,150
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.

57
00:05:35,680 --> 00:05:39,590
Et si je lance ce que je vais ouvrir la console et regarder l'ordre que les choses se produisent.

58
00:05:39,730 --> 00:05:45,800
Donc, quand je clique ici, je reçois Faid terminé avant que le fondu est effectivement fait.

59
00:05:46,090 --> 00:05:51,730
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.

60
00:05:52,060 --> 00:05:56,280
Et javascript n'attend pas cette seconde pour terminer avant de passer à la ligne suivante.

61
00:05:56,350 --> 00:06:02,310
Il s'est immédiatement déplacé sur cette ligne et imprime Faid terminé et puis le fondu finit.

62
00:06:02,470 --> 00:06:11,390
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.

63
00:06:11,440 --> 00:06:16,860
Et donc ce rappel sera appelé à l'intérieur de la fadeout automatiquement quand il est fait.

64
00:06:17,020 --> 00:06:20,830
Donc je vais déplacer notre journal constant là et sauver.

65
00:06:21,300 --> 00:06:31,650
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.

66
00:06:31,690 --> 00:06:39,220
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.

67
00:06:39,220 --> 00:06:42,580
Donc, j'ai mentionné qu'ils sont juste cachés, ils ne sont pas réellement disparu.

68
00:06:42,660 --> 00:06:51,940
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.

69
00:06:52,060 --> 00:06:55,620
Mais ensuite, il suffit de supprimer la page entièrement hors du DOM.

70
00:06:55,810 --> 00:07:03,180
Donc, nous devons utiliser une méthode appelée supprimer et nous voulons seulement le supprimer après le fondu est terminé.

71
00:07:03,340 --> 00:07:09,460
Donc, cela ressemble à ceci va juste faire cette suppression.

72
00:07:10,010 --> 00:07:13,930
Et ce que cela va faire est d'attendre jusqu'à ce que le fondu est terminé.

73
00:07:13,990 --> 00:07:17,050
Et pour chaque div il va exécuter la méthode Remove sur elle.

74
00:07:17,050 --> 00:07:20,430
Alors rafraîchissez et cliquez sur cliquez sur moi.

75
00:07:21,100 --> 00:07:29,850
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.

76
00:07:30,100 --> 00:07:39,130
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.

77
00:07:39,160 --> 00:07:42,910
Ils s'effacent, puis l'affichage est défini à aucun.

78
00:07:42,910 --> 00:07:52,850
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.

79
00:07:52,900 --> 00:07:57,080
Ce qui se passerait réellement, c'est que l'ordre n'est pas garanti.

80
00:07:57,280 --> 00:07:59,210
Et cela va prendre une seconde entière.

81
00:07:59,410 --> 00:08:01,800
Et ce code n'attendra pas cette seconde pour terminer.

82
00:08:01,930 --> 00:08:06,410
Donc, il va commencer à s'estomper et ensuite exécuter supprimer immédiatement après.

83
00:08:06,610 --> 00:08:13,490
Donc, cela finit par ressembler à ceci où il commence à s'estomper et juste immédiatement après qu'il les supprime.

84
00:08:13,780 --> 00:08:16,450
Donc, il est fondamentalement pas de fondu à tous.

85
00:08:16,480 --> 00:08:17,110
C'est pourquoi J.

86
00:08:17,110 --> 00:08:26,810
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.

87
00:08:26,830 --> 00:08:33,790
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.

88
00:08:34,030 --> 00:08:40,920
Donc, si je définis l'affichage d'être aucun au début comme ça et je rafraîchir.

89
00:08:41,020 --> 00:08:49,840
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.

90
00:08:49,840 --> 00:09:00,350
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.

91
00:09:00,970 --> 00:09:02,310
D'accord, c'est Faden.

92
00:09:02,350 --> 00:09:10,400
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.

93
00:09:10,660 --> 00:09:18,080
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.

94
00:09:18,310 --> 00:09:27,020
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.

95
00:09:27,040 --> 00:09:35,860
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.

96
00:09:35,860 --> 00:09:44,260
Très bien pour que la disparition de la prochaine série d'effets que je veux démontrer sont ces effets glissants.

97
00:09:44,320 --> 00:09:49,170
Donc, ici, nous avons une diapositive glisser vers le bas et glisser vers le haut.

98
00:09:49,240 --> 00:10:01,060
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.

99
00:10:01,090 --> 00:10:03,030
Alors je vais vous montrer comment ça marche.

100
00:10:03,130 --> 00:10:04,300
Nous allons changer cela.

101
00:10:04,300 --> 00:10:07,870
Plutôt que de basculer, nous allons glisser vers le bas.

102
00:10:08,650 --> 00:10:11,810
Et c'est parce que quand nous rafraîchissons nos éléments sont cachés.

103
00:10:11,920 --> 00:10:21,270
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.

104
00:10:21,400 --> 00:10:22,420
Il fait le contraire.

105
00:10:22,480 --> 00:10:26,360
Donc, si je me débarrasse de l'affichage sur afin qu'ils montrent.

106
00:10:26,710 --> 00:10:28,630
Et maintenant je clique sur le bouton.

107
00:10:28,630 --> 00:10:33,590
Leur hauteur est animée et ils glissent vers le haut, puis l'affichage est réglé sur Aucun à la fin.

108
00:10:33,910 --> 00:10:41,540
Et l'autre méthode est slide toggle qui fonctionne tout comme Faid basculer où il décide quoi faire.

109
00:10:41,650 --> 00:10:48,090
Donc, si je clique, ils glissent vers le haut et maintenant glisser vers le bas et de dos en haut et en bas.

110
00:10:48,370 --> 00:10:51,740
Donc, c'est tout ce qu'il ya à glisser vers le haut glisser vers le bas et glisser alterner.

111
00:10:51,760 --> 00:10:54,320
Ils étaient juste comme ils sont Faid méthodes analogiques.

112
00:10:54,610 --> 00:10:57,580
Il ya aussi un rappel facultatif que nous pouvons transmettre.

113
00:10:57,790 --> 00:11:04,250
Donc, si nous donnons une durée comme 1 seconde et puis je peux récupérer mon appel.

114
00:11:04,600 --> 00:11:09,380
Et je vais faire une autre escroquerie. Que le journal à la fin de la diapositive est fait.

115
00:11:09,730 --> 00:11:15,250
Et cela ne sera imprimé qu'une fois la deuxième diapositive complète terminée.

116
00:11:15,250 --> 00:11:16,130
Alors je rafraîchis.

117
00:11:16,270 --> 00:11:25,630
Regardons la console et ils cliquent sur me cliquer et vous pouvez voir cela seulement imprimé une fois la diapositive a été fait.

118
00:11:25,630 --> 00:11:28,380
La même chose ici prête attention ici.

119
00:11:28,390 --> 00:11:31,330
Cela changera à six.

120
00:11:31,330 --> 00:11:32,630
Voilà.

121
00:11:33,290 --> 00:11:43,670
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.

122
00:11:43,690 --> 00:11:48,400
Donc ici il faudra une seconde pour les glisser et ensuite ils sont retirés de la page.

123
00:11:48,460 --> 00:11:53,970
Et si nous allons à l'onglet éléments notre corps est vide à l'exception de ce bouton et le script.

124
00:11:54,580 --> 00:11:58,810
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.

125
00:11:58,810 --> 00:12:02,110
Ce sont de loin les plus fréquents décoloration et glissement.

126
00:12:02,110 --> 00:12:06,560
Et nous allons les utiliser au lieu de notre application de liste de tâches que nous allons commencer dans la prochaine vidéo.