1
00:00:03,680 --> 00:00:09,920
Weiter mit unserer Animation Übung aus dem vorherigen Teil eins.

2
00:00:09,920 --> 00:00:15,470
Wir werden einige weitere Animationen zu unserer Winkelanwendung hinzufügen.

3
00:00:15,470 --> 00:00:19,515
Insbesondere fügen wir eine Animation hinzu, die ausgelöst wird,

4
00:00:19,515 --> 00:00:24,440
wenn die Routenänderungen innerhalb unserer einseitigen Anwendung auftreten.

5
00:00:24,440 --> 00:00:28,125
Wir werden auch eine Animation hinzufügen, die es ermöglicht, dass

6
00:00:28,125 --> 00:00:32,595
eine Ansicht angezeigt wird, wenn die Daten von der Serverseite abgerufen werden.

7
00:00:32,595 --> 00:00:39,535
Wenn Sie also das Zahlenauswahlfeld in Ihrer Ansicht schließen und dann die Ansicht rendern,

8
00:00:39,535 --> 00:00:42,395
möchten wir, dass die Ansicht auf den Bildschirm projiziert wird,

9
00:00:42,395 --> 00:00:45,710
anstatt einfach nur alle plötzlich.

10
00:00:45,710 --> 00:00:49,774
Also, ein paar neue Animationen, die wir in dieser Übung hinzufügen werden.

11
00:00:49,774 --> 00:00:54,440
Auf dem Weg, wenn Sie mehrere Animationen in Ihrer Anwendung haben,

12
00:00:54,440 --> 00:00:57,800
kann es besser sein, den Code auf eine Weise zu refaktorieren, die

13
00:00:57,800 --> 00:01:01,190
überschaubar ist, anstatt

14
00:01:01,190 --> 00:01:05,210
jedes kleine Bit eines Triggers in jede der Dateien

15
00:01:05,210 --> 00:01:09,460
innerhalb unserer Komponenten unserer Winkelanwendung einzufügen.

16
00:01:09,460 --> 00:01:15,880
Lassen Sie uns also alle diese Schritte als Teil zwei der Animationsübung ausführen.

17
00:01:15,880 --> 00:01:20,750
Das erste, was ich tun werde, ist, dass wir

18
00:01:20,750 --> 00:01:26,705
den Code, den wir bereits als Teil einer dieser Animationsübung gemacht haben, umgestalten werden.

19
00:01:26,705 --> 00:01:32,790
Dieser Ansatz, den ich Ihnen hier zeige, ist nur mein Vorschlag.

20
00:01:32,790 --> 00:01:36,080
Sie müssen nicht unbedingt genau so folgen,

21
00:01:36,080 --> 00:01:40,460
aber ich denke, dass dies hilft, den Code viel besser zu organisieren.

22
00:01:40,460 --> 00:01:45,050
Also, was ich tun werde, ist genau so, als hätten wir einen separaten Ordner für Dienste,

23
00:01:45,050 --> 00:01:49,040
wir hatten einen separaten Ordner für die freigegebenen Ressourcen und so weiter,

24
00:01:49,040 --> 00:01:51,975
ich werde einen neuen Ordner namens Animationen erstellen.

25
00:01:51,975 --> 00:01:57,200
Wir werden den gesamten animationsbezogenen Code dort speichern und ihn dann nutzen, indem wir ihn dort importieren,

26
00:01:57,200 --> 00:02:03,065
wo es innerhalb unserer Komponenten in unserer Winkelanwendung erforderlich ist.

27
00:02:03,065 --> 00:02:05,865
Also, wenn ich zu unserem Code gehe,

28
00:02:05,865 --> 00:02:12,615
werde ich im App-Ordner einen neuen Ordner erstellen und ihn nennen Animationen.

29
00:02:12,615 --> 00:02:15,115
In diesem Animationsordner

30
00:02:15,115 --> 00:02:20,540
werde ich eine neue Datei erstellen und aus Mangel an einem besseren Wort

31
00:02:20,540 --> 00:02:26,940
werde ich es app.animation.ts Datei nennen.

32
00:02:27,060 --> 00:02:31,915
Dann importiere ich

33
00:02:31,915 --> 00:02:38,865
die verschiedenen Klassen aus eckigen Animationen, die ich in der DishDetail-Komponente gemacht habe. Wenn Sie

34
00:02:38,865 --> 00:02:41,135
also zur DishDetail-Komponente gehen,

35
00:02:41,135 --> 00:02:43,700
werden Sie sich daran erinnern, dass

36
00:02:43,700 --> 00:02:46,640
ich als erstes diese Zeile in die DishDetail-Komponente hinzugefügt habe.

37
00:02:46,640 --> 00:02:49,685
Ich werde es aus der DishDetail-Komponente ausschneiden und

38
00:02:49,685 --> 00:02:53,035
stattdessen in die App-Animationen einfügen,

39
00:02:53,035 --> 00:02:57,765
so dass, wo immer diese App-Animationen

40
00:02:57,765 --> 00:03:03,090
enthalten sind, indem ich sie in unsere anderen Komponenten importiere,

41
00:03:03,090 --> 00:03:05,640
dies automatisch für die richtige kommt.

42
00:03:05,640 --> 00:03:07,750
Jetzt, innerhalb dieser App-Animationen,

43
00:03:07,750 --> 00:03:12,000
werde ich einige Factory-Funktionen erstellen, die die verschiedenen Trigger exportieren.

44
00:03:12,000 --> 00:03:14,495
Die erste Factory-Funktion, die ich

45
00:03:14,495 --> 00:03:22,660
diese Exportfunktion erstellen und sie Sichtbarkeit nennen werde.

46
00:03:23,000 --> 00:03:27,290
Diese Sichtbarkeitsfunktion gibt den Code zurück, der

47
00:03:27,290 --> 00:03:32,070
dem Trigger entspricht, den wir in der DishDetail-Komponente getan haben.

48
00:03:32,070 --> 00:03:34,455
Also, ich gehe zurück zur DishDetail-Komponente,

49
00:03:34,455 --> 00:03:44,520
werde ich nur diesen gesamten Code für den Trigger von hier ausschneiden und dann zur

50
00:03:44,520 --> 00:03:48,800
App-Animation.ts-Datei zurückkehren und dann

51
00:03:48,800 --> 00:03:55,825
direkt dort in der Funktion hier einfügen.

52
00:03:55,825 --> 00:04:02,530
Dies wird nun zu einer Funktion, die aus meiner DishDetail-Komponente importiert werden kann.

53
00:04:02,530 --> 00:04:06,840
Also, gehen Sie zurück zu DishDetail Komponente.

54
00:04:06,840 --> 00:04:12,640
Jetzt, wo ich den Trigger und andere Klassen importiert

55
00:04:12,640 --> 00:04:19,030
habe, importiere ich jetzt die Sichtbarkeit

56
00:04:19,030 --> 00:04:30,475
aus der App, der Animation der Animation,

57
00:04:30,475 --> 00:04:35,300
und damit diese Funktion mir jetzt in meinem Code hier zur Verfügung steht.

58
00:04:35,300 --> 00:04:38,164
Also, sobald ich das in meinen Animationen mache,

59
00:04:38,164 --> 00:04:42,560
kann ich diese Funktion einfach aufrufen, damit ich

60
00:04:42,560 --> 00:04:49,515
Sichtbarkeit sagen kann, und dann wird der Triggercode jetzt Teil meiner Komponente hier.

61
00:04:49,515 --> 00:04:55,360
Nun, das finde ich eine bessere Möglichkeit, den Code für meine Animationen zu organisieren.

62
00:04:55,360 --> 00:04:59,400
Wenn ich nun den gleichen Trigger in einer anderen Komponente verwenden muss,

63
00:04:59,400 --> 00:05:07,545
kann ich diesem Ansatz einfach folgen, um ihn auch in meine anderen Komponenten aufzunehmen.

64
00:05:07,545 --> 00:05:09,800
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie

65
00:05:09,800 --> 00:05:13,020
einen kurzen Blick auf unsere Anwendung im Browser.

66
00:05:13,020 --> 00:05:18,460
Gehen Sie in den Browser, Sie sehen, dass, wenn ich zur Festplattenkomponente gehe,

67
00:05:18,460 --> 00:05:21,215
die Festplattenkomponente genau dort ist und dann

68
00:05:21,215 --> 00:05:24,810
das gleiche Animationsverhalten wie zuvor hat.

69
00:05:24,810 --> 00:05:26,640
Indem ich den Code refactoring,

70
00:05:26,640 --> 00:05:31,085
habe ich es geschafft, den Code besser zu organisieren und

71
00:05:31,085 --> 00:05:36,385
immer noch genau das gleiche wie Teil einer dieser Übung zu arbeiten.

72
00:05:36,385 --> 00:05:41,875
Wenn Sie nur eine einzelne Animation an einer einzigen Stelle verwendet haben,

73
00:05:41,875 --> 00:05:44,870
funktioniert der vorherige Ansatz einfach gut, aber wenn Sie

74
00:05:44,870 --> 00:05:48,800
mehrere haben und vor allem, wenn Sie den Code in vielen Komponenten

75
00:05:48,800 --> 00:05:55,160
wiederverwenden, dann ist dieser umstrukturierte Ansatz eine viel bessere Möglichkeit, die Lösung zu implementieren.

76
00:05:55,160 --> 00:06:00,250
Das nächste Update, das ich tun werde, ist Animationen zu Routenänderungen hinzuzufügen.

77
00:06:00,250 --> 00:06:04,670
Also, wenn ich von einer Ansicht zu einer anderen Ansicht gehe, also zum Beispiel

78
00:06:04,670 --> 00:06:11,145
von zu Hause zum Menü oder Menü oder zu kontaktieren oder umgekehrt,

79
00:06:11,145 --> 00:06:15,350
dann möchte ich in der Lage sein, diese Änderungen innerhalb meiner Anwendung zu animieren.

80
00:06:15,350 --> 00:06:16,430
Um dies zu tun,

81
00:06:16,430 --> 00:06:22,480
werde ich eine weitere Funktion in die App-Animation.ts-Datei einführen.

82
00:06:22,480 --> 00:06:24,980
Also, wenn ich in die App-Animation.ts-Datei gehe,

83
00:06:24,980 --> 00:06:33,210
werde ich eine andere Funktion exportieren, die ich als FlyInOut aufrufe,

84
00:06:34,570 --> 00:06:39,325
Sie werden sehen, warum ich diesen Namen hier verwende.

85
00:06:39,325 --> 00:06:49,150
Dann würde dies eine Funktion zurückgeben, die ein Trigger mit dem Namen FlyInOut ist.

86
00:06:49,820 --> 00:06:52,380
Also, im Inneren war Trigger,

87
00:06:52,380 --> 00:06:58,710
ich werde den Code für das definieren, was dieser Trigger tun wird.

88
00:06:59,620 --> 00:07:10,015
Also, hier werde ich einen Zustand hier mit dem Namenstern definieren,

89
00:07:10,015 --> 00:07:12,445
also spielt es keine Rolle, welchen Zustand es ist,

90
00:07:12,445 --> 00:07:16,820
dies ist auf jeden Zustand anwendbar und dann werde ich

91
00:07:16,820 --> 00:07:22,610
hier einige Stile definieren und die beiden Stile, die ich

92
00:07:22,610 --> 00:07:26,600
definieren werde, ist Deckkraft eins

93
00:07:26,600 --> 00:07:36,915
und Transformation ist TranslateX (0),

94
00:07:36,915 --> 00:07:41,355
was bedeutet, dass es ist in diesem Fall in seiner normalen Position.

95
00:07:41,355 --> 00:07:45,270
Nun, wenn ich Übergänge definiere,

96
00:07:45,270 --> 00:07:50,880
kann ich auch Übergänge auf diese Weise definieren.

97
00:07:50,990 --> 00:07:55,090
Also, wenn ich sage, geben Sie Übergang,

98
00:07:55,090 --> 00:07:59,240
ist der Enter-Übergang eine Abkürzung, um zu sagen, dass von

99
00:07:59,240 --> 00:08:03,190
void Zustand zu einem der vorhandenen Zustand.

100
00:08:03,190 --> 00:08:06,890
Also, was bedeutet, dass die Ansicht in meine Anwendung eintritt.

101
00:08:06,890 --> 00:08:10,655
Also geben Sie ein, was bedeutet, dass jetzt, wenn ich in

102
00:08:10,655 --> 00:08:15,450
einer bestimmten Ansicht in meiner einseitigen Anwendung weiterleite,

103
00:08:15,450 --> 00:08:18,500
diese Ansicht in die Ansicht eintritt.

104
00:08:18,500 --> 00:08:24,325
Deshalb kann ich in diesem Fall den Doppelpunkt eingeben Übergang anwenden.

105
00:08:24,325 --> 00:08:27,725
Nun gibt es in ähnlicher Weise einen weiteren Übergang namens Doppelpunkt

106
00:08:27,725 --> 00:08:31,790
verlassen, den ich anwenden kann, wenn Sie aus

107
00:08:31,790 --> 00:08:40,580
dieser Ansicht wechseln und dann die Ansicht aus dem Router-Steckplatz Ihrer Anwendung herausnehmen.

108
00:08:40,580 --> 00:08:46,950
Also, wir werden beide eingeben und die andere, die verlassen ist.

109
00:08:52,760 --> 00:08:56,555
Also, zwei Funktionen, die ich hier definieren werde,

110
00:08:56,555 --> 00:09:00,155
Übergang eingeben und Übergang verlassen hier.

111
00:09:00,155 --> 00:09:01,730
Also, für die Eingabe,

112
00:09:01,730 --> 00:09:04,150
was möchte ich definieren?

113
00:09:04,150 --> 00:09:09,330
Für Enter, lassen Sie mich die Funktion hier definieren

114
00:09:09,330 --> 00:09:11,800
, und ähnlich, für Urlaub auch,

115
00:09:11,800 --> 00:09:15,815
werde ich die Funktionen hier definieren.

116
00:09:15,815 --> 00:09:18,955
Also, dieses Gerüst hier zu schaffen.

117
00:09:18,955 --> 00:09:25,810
Jetzt kann ich die Informationen eingeben, die ich in diesen Übergängen möchte.

118
00:09:25,810 --> 00:09:28,025
Also, wenn dieser Übergang auftritt,

119
00:09:28,025 --> 00:09:35,590
werde ich mit einem Transformationsstil beginnen,

120
00:09:36,920 --> 00:09:42,495
TranslateX minus 100 Prozent,

121
00:09:42,495 --> 00:09:47,680
was bedeutet, dass die Ansicht hier vollständig außer der Ansicht ist.

122
00:09:47,680 --> 00:09:52,205
Also, Sie beginnen dort von minus 100 Prozent in diesem Moment.

123
00:09:52,205 --> 00:09:53,930
Also, wenn Sie eintreten,

124
00:09:53,930 --> 00:09:55,590
werden Sie damit beginnen,

125
00:09:55,590 --> 00:09:58,710
und dann auch an dieser Stelle

126
00:09:58,710 --> 00:10:03,530
werde ich animieren und in 500 animieren.

127
00:10:03,530 --> 00:10:05,710
Also, wenn ich 500 so spezifiziere,

128
00:10:05,710 --> 00:10:07,960
können Sie es sogar auf diese Weise tun.

129
00:10:07,960 --> 00:10:10,995
Alternativ können Sie in Anführungszeichen

130
00:10:10,995 --> 00:10:16,900
„500ms“ sagen, und dann können Sie sogar ease-in oder ease-out verwenden.

131
00:10:16,900 --> 00:10:19,400
Also, lassen Sie mich dies in

132
00:10:19,400 --> 00:10:28,980
500ms Ease-In ändern, weil diese Ansicht hereinkommt.

133
00:10:28,980 --> 00:10:30,790
So werden wir die Ansicht erleichtern.

134
00:10:30,790 --> 00:10:37,610
Also, für Urlaub, werde ich den Übergang als animiert anwenden,

135
00:10:37,610 --> 00:10:45,640
und dann würde ich sagen, 500 Millisekunden, wieder, Leichtigkeit.

136
00:10:45,640 --> 00:10:47,740
Also, diese Ansicht geht.

137
00:10:47,740 --> 00:10:50,350
Also, wir wollen diese Ansicht erleichtern.

138
00:10:50,350 --> 00:10:55,115
Dann

139
00:10:55,115 --> 00:11:03,880
ist in diesem Fall der Stil, den ich anwende,

140
00:11:04,670 --> 00:11:09,590
TranslateX 100 Prozent.

141
00:11:09,590 --> 00:11:15,370
Diese Ansicht wird also vollständig vom Bildschirm verschwinden.

142
00:11:15,370 --> 00:11:18,055
TranslateX 100 Prozent.

143
00:11:18,055 --> 00:11:23,000
Außerdem werde ich die Deckkraft auf Null setzen.

144
00:11:23,000 --> 00:11:25,615
Also, verschwindet vollständig vom Bildschirm.

145
00:11:25,615 --> 00:11:31,140
Also, diese Animation wird in eine gute neue Funktion hier hinzufügen.

146
00:11:31,140 --> 00:11:33,570
Nun, für diesen

147
00:11:33,570 --> 00:11:40,825
kann ich auch hinzufügen, beginnend mit einer Deckkraft von Null, wenn Sie es vorziehen.

148
00:11:40,825 --> 00:11:43,730
Lassen Sie uns das hinzufügen und sehen, wie es aussieht.

149
00:11:43,730 --> 00:11:48,895
Also, das ist der FlyInOut-Trigger, den ich hier definiert habe.

150
00:11:48,895 --> 00:11:50,910
Nun fragen Sie sich offensichtlich,

151
00:11:50,910 --> 00:11:53,690
wie verwende ich dieses FlyInOut und wende

152
00:11:53,690 --> 00:11:56,650
dies dann auf Routenübergänge in meiner Anwendung an?

153
00:11:56,650 --> 00:11:59,815
Also, um das zu tun, werden wir zuerst gehen,

154
00:11:59,815 --> 00:12:03,055
beginnend mit Menü component.ts Datei.

155
00:12:03,055 --> 00:12:04,810
Ich werde das

156
00:12:04,810 --> 00:12:13,220
FlyInOut

157
00:12:14,730 --> 00:12:25,820
aus der App-Animation importieren.

158
00:12:27,090 --> 00:12:31,230
Dann, wenn ich zur Komponente gehe,

159
00:12:31,230 --> 00:12:35,425
werde ich jetzt eine neue Eigenschaft namens Host einführen.

160
00:12:35,425 --> 00:12:39,445
Ich werde Ihnen sagen, was in kurzer Zeit in den Gastgeber geht.

161
00:12:39,445 --> 00:12:42,939
Dann werden wir auch die Animationseigenschaft einschließen,

162
00:12:42,939 --> 00:12:45,470
die hier ein Array ist.

163
00:12:45,470 --> 00:12:50,980
Dann, hier drinnen, werde ich das FlyInOut verwenden, das wir gerade importiert haben.

164
00:12:50,980 --> 00:12:59,325
Dieser Animationstrigger wird also für diese Medienkomponente angewendet.

165
00:12:59,325 --> 00:13:00,660
Nun, innerhalb des Hosts,

166
00:13:00,660 --> 00:13:07,975
so stelle ich sicher, dass diese spezielle Animation passiert, wenn Routenänderungen auftreten.

167
00:13:07,975 --> 00:13:11,215
Also, innerhalb dieses Hosts hier,

168
00:13:11,215 --> 00:13:15,560
gebe ich dies als sagen,

169
00:13:17,070 --> 00:13:22,705
@flyInOut und sage true,

170
00:13:22,705 --> 00:13:28,730
und dies sollte auch in Anführungszeichen eingeschlossen werden,

171
00:13:29,370 --> 00:13:41,660
@flyInOut, true, und dann Stil,

172
00:13:42,000 --> 00:13:45,595
Anzeigeblock.

173
00:13:45,595 --> 00:13:52,330
Also, diese beiden sollten in der Host-Eigenschaft hier angewendet werden.

174
00:13:52,330 --> 00:13:56,410
Nun, wenn wir dies tun, beginnt meine Menükomponente jetzt zu animieren,

175
00:13:56,410 --> 00:14:00,440
wenn ich in die Menükomponente gehe,

176
00:14:00,440 --> 00:14:02,965
und dann auch, wenn ich die Menükomponente verlasse.

177
00:14:02,965 --> 00:14:10,705
Jetzt werde ich dasselbe auf die restlichen Komponenten meiner Angular-Anwendung anwenden.

178
00:14:10,705 --> 00:14:12,720
Also, was ich tun werde, ist,

179
00:14:12,720 --> 00:14:15,260
ich werde das einfach kopieren,

180
00:14:15,850 --> 00:14:20,910
und dann werden wir das auf die über Komponente anwenden.

181
00:14:20,910 --> 00:14:23,545
Also, ich gehe zu der über Komponente.

182
00:14:23,545 --> 00:14:25,555
Innerhalb des Komponenten-Dekorators

183
00:14:25,555 --> 00:14:28,650
habe ich die Informationen hier aufgenommen,

184
00:14:28,650 --> 00:14:34,070
und Sie sehen die rote zerquetschige Linie, die mich daran erinnert, dass ich

185
00:14:34,080 --> 00:14:42,255
FlyInOut aus Animationen, App-Animationen importieren muss.

186
00:14:42,255 --> 00:14:46,410
Also, der gleiche Ansatz, über die Komponente,

187
00:14:46,410 --> 00:14:52,080
dann innerhalb der Kontaktkomponente auch das Gleiche,

188
00:15:08,840 --> 00:15:17,980
und dann die Host- und Animationseigenschaften auf den Komponenten-Dekorator anwenden,

189
00:15:17,980 --> 00:15:21,660
und was haben wir dann noch?

190
00:15:21,660 --> 00:15:28,040
Die Home-Komponente. Gehen wir zur Home-Komponente und wiederholen Sie das gleiche hier.

191
00:15:28,040 --> 00:15:33,385
Ich werde den Host und die Animationseigenschaft hinzufügen

192
00:15:33,385 --> 00:15:36,210
und dann

193
00:15:36,210 --> 00:15:50,210
FlyInOut aus App-Animation importieren.

194
00:15:50,350 --> 00:15:56,235
Haben wir welche verpasst? Oh, wir müssen auch die Komponente „Detail“ aktualisieren.

195
00:15:56,235 --> 00:15:58,360
Also, lassen Sie mich auf die Schüssel Detail Komponente gehen.

196
00:15:58,360 --> 00:16:00,840
Da wir dort bereits die Sichtbarkeit haben,

197
00:16:00,840 --> 00:16:04,435
werde ich nur das FlyInOut importieren.

198
00:16:04,435 --> 00:16:08,920
Dann, da wir die restlichen Teile hier bereits eingerichtet haben,

199
00:16:08,920 --> 00:16:12,665
werde ich hineingehen und diesen Code einfügen,

200
00:16:12,665 --> 00:16:17,125
und offensichtlich habe ich hier zwei Animationen.

201
00:16:17,125 --> 00:16:20,860
Lassen Sie mich die Sichtbarkeit von hier aus ausschneiden und

202
00:16:20,860 --> 00:16:29,420
sie dann der anderen Animation hinzufügen,

203
00:16:29,420 --> 00:16:35,040
und schneiden Sie das dann aus, so dass ich eine einzelne Animationseigenschaft habe,

204
00:16:35,040 --> 00:16:40,780
wobei sowohl FlyInOut- als auch Sichtbarkeitsfunktionen eingeschlossen und dort aufgerufen werden,

205
00:16:40,780 --> 00:16:42,630
und dann die Hosteigenschaft.

206
00:16:42,630 --> 00:16:45,625
Speichern wir nun die Änderungen und werfen Sie einen Blick auf

207
00:16:45,625 --> 00:16:51,370
die neue Animation, die wir gerade auf unsere Komponenten angewendet haben.

208
00:16:51,370 --> 00:16:56,475
Beginnen Sie mit der Home-Ansicht.

209
00:16:56,475 --> 00:16:59,000
Also, wir haben die Home-Ansicht hier gerendert.

210
00:16:59,000 --> 00:17:02,500
Lassen Sie mich jetzt schnell zur Ansicht Info gehen,

211
00:17:02,500 --> 00:17:05,800
und dann sehen Sie, dass die Info-Ansicht nur hineingleitet, während

212
00:17:05,800 --> 00:17:09,780
die Startansicht hier in den Bildschirm gleitet.

213
00:17:09,780 --> 00:17:11,810
In ähnlicher Weise

214
00:17:11,810 --> 00:17:16,190
sehen Sie, wenn ich zum Menü gehe, dass die Menüansicht hineingleitet, während die Ansicht Info ausgeblendet wird.

215
00:17:16,190 --> 00:17:20,240
Es ist so schnell, dass du es nicht als solche bemerkst.

216
00:17:20,240 --> 00:17:22,740
In ähnlicher Weise wird in der

217
00:17:22,740 --> 00:17:24,710
Kontaktansicht die Kontaktansicht eingeblendet.

218
00:17:24,710 --> 00:17:28,940
So kann diese Art von Animation hinzugefügt werden, indem Sie

219
00:17:28,940 --> 00:17:34,170
diesen Ansatz verwenden, den wir gerade für Ihre Angular-Anwendung illustriert haben.

220
00:17:34,170 --> 00:17:40,375
Wir sind noch nicht fertig. Wir werden eine weitere Animation innerhalb unserer Anwendung durchführen.

221
00:17:40,375 --> 00:17:44,955
Um zu veranschaulichen, was ich in der nächsten Animation machen möchte,

222
00:17:44,955 --> 00:17:48,495
lassen Sie uns die Menükomponente kurz ansehen.

223
00:17:48,495 --> 00:17:50,780
So sehen Sie, dass, wenn die Menükomponente,

224
00:17:50,780 --> 00:17:54,830
wenn sich der Spinner dreht und dann durch die Ansicht ersetzt wird,

225
00:17:54,830 --> 00:17:57,180
die Ansicht plötzlich auf dem Bildschirm erscheint,

226
00:17:57,180 --> 00:17:59,740
und es ist ein wenig lästig für das Auge.

227
00:17:59,740 --> 00:18:01,230
Du merkst es vielleicht nicht.

228
00:18:01,230 --> 00:18:03,725
Damit bist du vielleicht sehr zufrieden.

229
00:18:03,725 --> 00:18:07,340
Aber wir können in

230
00:18:07,340 --> 00:18:12,235
dieser Ansicht eine Art der Vereinfachung hinzufügen, wenn die Daten vom Server abgerufen werden und die Ansicht in gerendert wird.

231
00:18:12,235 --> 00:18:20,625
Wenn also die Variable des Gerichts in meiner Menükomponente.ts-Datei nicht annulliert wird,

232
00:18:20,625 --> 00:18:27,290
wird der Spinner ausgeblendet und dann die Ansicht des Gerichts,

233
00:18:27,290 --> 00:18:30,320
das Menü wird konstruiert und dann ausgelegt.

234
00:18:30,320 --> 00:18:33,060
Also, wir wollen, dass das in den Bildschirm fließt.

235
00:18:33,060 --> 00:18:38,820
Also, lassen Sie uns eine weitere Animation hinzufügen, um das sowohl in der Menükomponente zu bewirken.

236
00:18:38,820 --> 00:18:42,055
Wir werden das Gleiche auch in der Komponente „Detail“ anwenden.

237
00:18:42,055 --> 00:18:46,540
Wir verwenden das gleiche auch in der Home-Komponente und der About Komponente,

238
00:18:46,540 --> 00:18:51,550
wo wir die Daten abrufen, um die Liste der Führungslinien anzuzeigen.

239
00:18:51,550 --> 00:18:56,145
Also, wo immer Sie Daten vom Server abrufen und dann die Ansicht auslegen,

240
00:18:56,145 --> 00:18:57,740
wenn die Ansicht angezeigt wird,

241
00:18:57,740 --> 00:19:03,275
möchten wir die Ansicht erleichtern, indem Sie diese neue Animation verwenden, die ich als nächstes erstellen werde.

242
00:19:03,275 --> 00:19:06,230
Gehe zur App-Animation.ts-Datei,

243
00:19:06,230 --> 00:19:08,615
werde ich hier eine andere Funktion hinzufügen,

244
00:19:08,615 --> 00:19:14,750
und lassen Sie mich es erweitern nennen.

245
00:19:14,750 --> 00:19:18,200
Diese Funktion erweitert die Ansicht, die

246
00:19:18,200 --> 00:19:22,370
angelegt wird, nachdem die Daten von der Serverseite abgerufen werden.

247
00:19:22,370 --> 00:19:24,885
Also, diese Ansicht, wieder,

248
00:19:24,885 --> 00:19:28,370
werde ich hier einen Auslöser zurückgeben.

249
00:19:28,370 --> 00:19:32,280
Ich werde den Trigger als expandieren benennen,

250
00:19:32,280 --> 00:19:37,690
und dieser Trigger wird erstellt.

251
00:19:37,890 --> 00:19:40,590
Wie definieren wir diesen Trigger?

252
00:19:40,590 --> 00:19:49,870
Also, in diesem Auslöser werden wir einen Staat mit Stern einschließen.

253
00:19:49,870 --> 00:19:51,920
Es spielt also keine Rolle, in welchem Zustand es ist.

254
00:19:51,920 --> 00:20:00,580
Alle Zustände werden mit dem Stil als

255
00:20:00,580 --> 00:20:10,420
Deckkraft 1 Transformation übersetzt x 0 gerendert werden.

256
00:20:10,420 --> 00:20:16,430
Also, es wird rechts und zentriert in meiner Anwendung angezeigt.

257
00:20:17,520 --> 00:20:20,990
Das sollte da eine Klammer sein.

258
00:20:20,990 --> 00:20:23,250
Ich schaute es an und sagte:

259
00:20:23,250 --> 00:20:25,735
Warum zeigt es eine rote zerquetschige Linie.

260
00:20:25,735 --> 00:20:29,560
Also, wenn Sie sehr schnell tippen, machen Sie oft Fehler dort.

261
00:20:29,560 --> 00:20:31,070
Anstelle einer eckigen Klammer

262
00:20:31,070 --> 00:20:34,205
sollte das also eine Klammer sein.

263
00:20:34,205 --> 00:20:35,915
Also, das ist der Staat.

264
00:20:35,915 --> 00:20:44,925
Also, jeder Zustand, dass es vollständig sichtbar und zentriert sein wird, wo es zentriert werden soll.

265
00:20:44,925 --> 00:20:49,180
Lassen Sie mich jetzt einen Übergang auslösen.

266
00:20:49,180 --> 00:20:51,730
Jetzt wird dieser Übergang nur

267
00:20:51,730 --> 00:20:55,465
bei der Eingabe ausgelöst, wenn die Ansicht auf dem Bildschirm ausgelegt ist.

268
00:20:55,465 --> 00:21:00,740
Der Ausgang Teil machen wir es bereits in der Route-Animation, also brauchen wir das nicht.

269
00:21:00,740 --> 00:21:03,060
Wir brauchen nur das Inter-Teil für diese Ansicht, da

270
00:21:03,060 --> 00:21:06,575
die Ansicht dort auf diesem Bildschirm gerendert wird.

271
00:21:06,575 --> 00:21:08,435
Also, im Enter,

272
00:21:08,435 --> 00:21:14,625
werde ich den Übergang entsprechend definieren.

273
00:21:14,625 --> 00:21:18,860
Also, im Übergang, was möchte ich tun?

274
00:21:18,860 --> 00:21:27,260
Ich möchte den gleichen Ansatz anwenden, den ich mit dem Enter-Übergang hier verwendet habe.

275
00:21:27,260 --> 00:21:32,600
Also, ich werde das nur kopieren und dann einige kleinere Anpassungen an dem Code dort vornehmen.

276
00:21:32,600 --> 00:21:36,335
Also, für den Übergang hier auch

277
00:21:36,335 --> 00:21:38,490
möchte ich das Gleiche anwenden.

278
00:21:38,490 --> 00:21:42,040
Ich werde sagen, insta von 100 Prozent zu übersetzen.

279
00:21:42,040 --> 00:21:46,630
Ich werde nur 50 Prozent verwenden und dann werde ich die übersetzen Y tun.

280
00:21:46,630 --> 00:21:52,460
Also, was bedeutet, dass diese Ansicht von den Top 50 Precent fallen wird beginnend mit

281
00:21:52,460 --> 00:21:58,655
Deckkraft Null und dann werde ich es in ein bisschen schneller Zeit,

282
00:21:58,655 --> 00:22:04,200
200 Millisekunden erleichtern und es in unsere Anwendung erleichtern.

283
00:22:04,200 --> 00:22:09,640
Nun sehen Sie hier die geringfügige Anpassung an den Code.

284
00:22:09,640 --> 00:22:14,845
Also, übersetzen minus 50 Prozent und Deckkraft Null und

285
00:22:14,845 --> 00:22:21,025
es wird in 200 Millisekunden erleichtert und dann an diesem Punkt

286
00:22:21,025 --> 00:22:27,105
kann ich diesen Stil als den gleichen Stil anwenden.

287
00:22:27,105 --> 00:22:32,240
Ich werde mich dort bewerben. Also, ich werde diesen Stil einfach kopieren und dann diesen Stil dort anwenden.

288
00:22:32,240 --> 00:22:34,440
Also, wenn es gelockert wird,

289
00:22:34,440 --> 00:22:40,115
wird es hineinkommen und vollständig sichtbar sein, wo es sein sollte.

290
00:22:40,115 --> 00:22:43,735
Also, das ist die Erweiterungsfunktion, die ich hier definiert habe.

291
00:22:43,735 --> 00:22:45,950
Also, wo möchte ich diese Funktion nutzen?

292
00:22:45,950 --> 00:22:52,060
Wir werden zuerst zur Menükomponente gehen und innerhalb der Menükomponente

293
00:22:52,060 --> 00:22:55,530
werde ich nun auch das importieren,

294
00:22:55,530 --> 00:23:04,595
erweitern und dann in meine Animationen hinzufügen und dann wie kann ich diese Erweiterung anwenden?

295
00:23:04,595 --> 00:23:08,160
Also, gehen Sie zu diesem Menü Komponenten Vorlagendatei.

296
00:23:08,160 --> 00:23:09,925
In der Vorlagendatei

297
00:23:09,925 --> 00:23:12,840
werde ich die Erweiterung auf die

298
00:23:12,840 --> 00:23:20,435
Rasterliste anwenden, in der ich dies anwende.

299
00:23:20,435 --> 00:23:24,960
Also, lassen Sie mich kopieren, und dann werden wir auch

300
00:23:24,960 --> 00:23:32,230
auf die Home-Komponente gehen und innerhalb der Home-Komponente auch,

301
00:23:32,230 --> 00:23:42,590
Ich werde die Erweiterung einschließen und dann die Erweiterung der Animation hinzufügen,

302
00:23:43,430 --> 00:23:49,475
und dann gehen Sie auf die Home-Komponenten Template-Datei und dann werde ich anwenden

303
00:23:49,475 --> 00:23:57,060
, dass erweitern Sie die Schüssel Komponenten MD Karte,

304
00:23:57,060 --> 00:24:02,695
auf die Promotion-Komponenten MD-Karte und auch auf die Leader

305
00:24:02,695 --> 00:24:05,580
Komponenten MD-Karte hier, weil alle diese

306
00:24:05,580 --> 00:24:09,880
drei in der Zukunft vom Server abgerufen und dann gerendert werden.

307
00:24:09,880 --> 00:24:15,075
Daher werden die Dish-Komponentendaten bereits vom Server abgerufen.

308
00:24:15,075 --> 00:24:20,080
Nun, das Gleiche geht auf die DishDetail-Komponente.

309
00:24:20,080 --> 00:24:27,000
Ich werde die Expansion zu den Importen hinzufügen und dann

310
00:24:27,000 --> 00:24:35,530
eine Erweiterung in die Animation zur Ansicht der DishDetail-Komponente hinzufügen.

311
00:24:35,530 --> 00:24:37,415
Zusammen mit einer Sichtbarkeit

312
00:24:37,415 --> 00:24:40,095
werde ich auch das Expandieren auf

313
00:24:40,095 --> 00:24:47,705
das Kartendiv dort anwenden und dann auf die Kommentare div auch hier.

314
00:24:47,705 --> 00:24:50,720
Dies befindet sich in der DishDetail-Komponente.

315
00:24:50,720 --> 00:24:54,530
Die Kontaktkomponente hat nichts, das vom Server abgerufen wird.

316
00:24:54,530 --> 00:25:00,265
Also, ich gehe einfach auf die about Komponente und in der about Komponente

317
00:25:00,265 --> 00:25:08,680
werde ich auch das Expandieren und auch in die Animationen einschließen.

318
00:25:08,680 --> 00:25:12,870
Gehen Sie zu der über Komponenten-Vorlagendatei

319
00:25:12,870 --> 00:25:17,190
hier dieser Test hier, der zeigt, dass die Führer von der Serverseite abgerufen werden.

320
00:25:17,190 --> 00:25:20,310
Also, ich werde das Expandieren darüber anwenden.

321
00:25:20,310 --> 00:25:23,250
Lassen Sie uns die Änderungen speichern und dann gehen und werfen Sie

322
00:25:23,250 --> 00:25:26,960
einen Blick auf unsere eckige Anwendung im Browser.

323
00:25:26,960 --> 00:25:29,235
Gehen Sie zu unserer eckigen Anwendung.

324
00:25:29,235 --> 00:25:31,665
Nun, wenn Sie in die Home-Vorlage gehen,

325
00:25:31,665 --> 00:25:34,700
können Sie sehen, dass die Karten, wenn sie abgerufen wurden,

326
00:25:34,700 --> 00:25:38,070
sie in meine Ansicht gleiteten.

327
00:25:38,070 --> 00:25:40,970
Nun, ähnlich, wenn Sie zu der about Komponente gehen,

328
00:25:40,970 --> 00:25:45,050
sehen Sie, dass, sobald die Daten vom Server abgerufen werden,

329
00:25:45,050 --> 00:25:50,470
dann wird das Rendering der verschiedenen Führungslinien

330
00:25:50,470 --> 00:25:56,590
immer so langsam in die Position in dieser Ansicht hier verschoben.

331
00:25:56,590 --> 00:25:58,905
In ähnlicher Weise

332
00:25:58,905 --> 00:26:01,270
werden wir auf die Menükomponente gehen, hier ein ähnliches Verhalten sehen.

333
00:26:01,270 --> 00:26:03,595
Sobald die Menüdaten fertig sind,

334
00:26:03,595 --> 00:26:07,065
gleitet die Menükomponente direkt dort ein.

335
00:26:07,065 --> 00:26:09,980
Das Gleiche mit dem Gericht Detail Komponenten.

336
00:26:09,980 --> 00:26:12,490
Also, lassen Sie mich zur DishDetail-Komponente gehen und Sie werden sehen, dass

337
00:26:12,490 --> 00:26:15,250
die Ansicht dort eingleitet, aber die

338
00:26:15,250 --> 00:26:18,495
andere Animation, die

339
00:26:18,495 --> 00:26:22,625
verschwindet und diesen Teil wieder auftaucht, funktioniert immer noch wie zuvor.

340
00:26:22,625 --> 00:26:32,755
Sie sehen also, dass wir eine weitere Animation in unsere Angular-Anwendung eingeführt haben.

341
00:26:32,755 --> 00:26:38,555
Nun, ob Sie das mögen oder Sie eine aufwendigere Art und Weise tun wollen, Animationen zu machen,

342
00:26:38,555 --> 00:26:41,605
sicherlich, Sie können verrückt mit

343
00:26:41,605 --> 00:26:45,395
vielen verschiedenen Arten von Dingen mit Ihrer Animation machen.

344
00:26:45,395 --> 00:26:52,395
Ändern Sie viele verschiedene Eigenschaften innerhalb der Stile wie gewünscht und so weiter.

345
00:26:52,395 --> 00:26:57,060
Aber ich hatte das Gefühl, dass ein paar subtile Animationen hier und da

346
00:26:57,060 --> 00:27:02,390
dazu beitragen werden, die Benutzeroberfläche für meine eckige Anwendung zu verbessern.

347
00:27:02,390 --> 00:27:08,195
Also, ich habe in zwei weitere neue Animationen zu meiner Angular-Anwendung hinzugefügt.

348
00:27:08,195 --> 00:27:14,535
Damit schließen wir den zweiten Teil unserer Animationsübung ab.

349
00:27:14,535 --> 00:27:18,240
Ich hoffe, dass

350
00:27:18,240 --> 00:27:21,280
Sie mit diesen beiden Teilen Übung besser verstanden haben, wie Sie

351
00:27:21,280 --> 00:27:24,555
Animationen innerhalb Ihrer Angular-Anwendung verwenden können.

352
00:27:24,555 --> 00:27:32,040
Dies ist ein guter Zeitpunkt für Sie, ein Git-Commit mit der Nachricht zu machen, Animationen Teil zwei.