1
00:00:03,680 --> 00:00:09,920
Продолжая наше анимационное упражнение из предыдущей части первой.

2
00:00:09,920 --> 00:00:15,470
Добавим еще несколько анимаций в наше угловое приложение.

3
00:00:15,470 --> 00:00:19,515
В частности, мы добавим в анимацию, которая будет срабатывать

4
00:00:19,515 --> 00:00:24,440
при изменении маршрута в нашем одностраничном приложении.

5
00:00:24,440 --> 00:00:28,125
Мы также добавим в анимацию, которая позволяет

6
00:00:28,125 --> 00:00:32,595
вид, который будет отображаться, когда данные извлекаются со стороны сервера,

7
00:00:32,595 --> 00:00:39,535
поэтому, когда вы отбрасываете счетчик в своем представлении, а затем рендеринг представления,

8
00:00:39,535 --> 00:00:42,395
мы хотим, чтобы представление было проецироваться на экран

9
00:00:42,395 --> 00:00:45,710
, а не просто появляясь все внезапно.

10
00:00:45,710 --> 00:00:49,774
Итак, пара новых анимаций, которые мы добавим в этом упражнении.

11
00:00:49,774 --> 00:00:54,440
По пути, когда у вас есть несколько анимаций в вашем приложении,

12
00:00:54,440 --> 00:00:57,800
может быть лучше реорганизовать код таким образом, который является более

13
00:00:57,800 --> 00:01:01,190
управляемым, а не включать частичный

14
00:01:01,190 --> 00:01:05,210
каждый кусочек триггера в каждый из файлов

15
00:01:05,210 --> 00:01:09,460
в наших компонентах нашего углового приложения.

16
00:01:09,460 --> 00:01:15,880
Итак, давайте сделаем все эти шаги как часть второй анимационного упражнения.

17
00:01:15,880 --> 00:01:20,750
Первое, что я собираюсь сделать, это то, что мы реорганизовать

18
00:01:20,750 --> 00:01:26,705
код, который мы уже сделали в рамках одного из этих упражнений анимации.

19
00:01:26,705 --> 00:01:32,790
Этот подход, который я вам иллюстрирую, - это просто мой предложенный подход.

20
00:01:32,790 --> 00:01:36,080
Вам не обязательно следовать именно таким образом,

21
00:01:36,080 --> 00:01:40,460
, но я чувствую, что это помогает лучше организовать код.

22
00:01:40,460 --> 00:01:45,050
Итак, то, что я собираюсь сделать, так же, как у нас была отдельная папка для сервисов,

23
00:01:45,050 --> 00:01:49,040
у нас была отдельная папка для общих ресурсов и так далее,

24
00:01:49,040 --> 00:01:51,975
Я собираюсь создать новую папку с именем animations.

25
00:01:51,975 --> 00:01:57,200
Мы будем хранить все связанные с анимацией код там, а затем использовать его, импортируя его

26
00:01:57,200 --> 00:02:03,065
везде, где это требуется в наших компонентах в нашем угловом приложении.

27
00:02:03,065 --> 00:02:05,865
Итак, перейдя к нашему коду,

28
00:02:05,865 --> 00:02:12,615
в папке приложения я собираюсь создать новую папку и назвать ее Animations.

29
00:02:12,615 --> 00:02:15,115
Внутри этой папки Animations

30
00:02:15,115 --> 00:02:20,540
Я собираюсь создать новый файл и из-за отсутствия лучшего слова я

31
00:02:20,540 --> 00:02:26,940
назову его app.animation.ts файл.

32
00:02:27,060 --> 00:02:31,915
Затем внутри этого я собираюсь импортировать

33
00:02:31,915 --> 00:02:38,865
различные классы из угловых анимаций, которые я сделал в компоненте DishDetail.

34
00:02:38,865 --> 00:02:41,135
Итак, перейдя к компоненту DishDetail,

35
00:02:41,135 --> 00:02:43,700
вы помните, что первое, что я сделал

36
00:02:43,700 --> 00:02:46,640
, я добавил эту строку в компонент DishDetail.

37
00:02:46,640 --> 00:02:49,685
Я собираюсь вырезать его из компонента DishDetail и

38
00:02:49,685 --> 00:02:53,035
вместо этого вставить его в анимацию приложения,

39
00:02:53,035 --> 00:02:57,765
, чтобы везде, где это приложение анимации

40
00:02:57,765 --> 00:03:03,090
включено, импортируя его в наши другие компоненты,

41
00:03:03,090 --> 00:03:05,640
это автоматически придет прямо там.

42
00:03:05,640 --> 00:03:07,750
Теперь, в этом приложении анимации,

43
00:03:07,750 --> 00:03:12,000
я собираюсь создать некоторые заводские функции, которые будут экспортировать различные триггеры.

44
00:03:12,000 --> 00:03:14,495
Первая заводская функция, которую я создаю

45
00:03:14,495 --> 00:03:22,660
эту функцию экспорта и назову ее видимость.

46
00:03:23,000 --> 00:03:27,290
Эта функция видимости вернет код

47
00:03:27,290 --> 00:03:32,070
, соответствующий триггеру, который мы сделали в компоненте DishDetail.

48
00:03:32,070 --> 00:03:34,455
Итак, возвращаясь к компоненту DishDetail,

49
00:03:34,455 --> 00:03:44,520
я просто собираюсь вырезать весь этот код для триггера отсюда, а затем вернуться к файлу animation.ts приложения

50
00:03:44,520 --> 00:03:48,800
, а затем вставить его в

51
00:03:48,800 --> 00:03:55,825
место прямо там, в функции здесь.

52
00:03:55,825 --> 00:04:02,530
Теперь это становится функцией, доступной для импорта из компонента DishDetail.

53
00:04:02,530 --> 00:04:06,840
Итак, возвращаясь к компоненту DishDetail.

54
00:04:06,840 --> 00:04:12,640
Теперь, на месте, где я импортировал триггер и другие классы,

55
00:04:12,640 --> 00:04:19,030
я собираюсь теперь импортировать видимость

56
00:04:19,030 --> 00:04:30,475
из приложения анимации, анимации,

57
00:04:30,475 --> 00:04:35,300
, и поэтому эта функция теперь станет доступна мне в моем коде здесь.

58
00:04:35,300 --> 00:04:38,164
Итак, как только я сделаю это внутри моей анимации,

59
00:04:38,164 --> 00:04:42,560
я могу просто вызвать эту функцию, чтобы я мог сказать

60
00:04:42,560 --> 00:04:49,515
видимость, а затем код триггера теперь становится частью моего компонента здесь.

61
00:04:49,515 --> 00:04:55,360
Теперь это, я считаю, является лучшим способом организации кода для моих анимаций.

62
00:04:55,360 --> 00:04:59,400
Теперь, если мне нужно использовать тот же триггер в другом компоненте,

63
00:04:59,400 --> 00:05:07,545
я могу просто следовать этому подходу, чтобы включить его в мои другие компоненты.

64
00:05:07,545 --> 00:05:09,800
Давайте сохраним изменения, а затем пойдем и возьмем

65
00:05:09,800 --> 00:05:13,020
быстрый взгляд на наше приложение в браузере.

66
00:05:13,020 --> 00:05:18,460
Зайдите в браузер, вы видите, что когда я перехожу к компоненту диска,

67
00:05:18,460 --> 00:05:21,215
компонент диска находится прямо там, а затем

68
00:05:21,215 --> 00:05:24,810
он будет иметь такое же поведение анимации, как и раньше.

69
00:05:24,810 --> 00:05:26,640
Итак, рефакторинг кода,

70
00:05:26,640 --> 00:05:31,085
мне удалось лучше организовать код, и

71
00:05:31,085 --> 00:05:36,385
по-прежнему работает точно так же, как часть первой этого упражнения.

72
00:05:36,385 --> 00:05:41,875
Если у вас была только одна анимация, используемая в одном месте,

73
00:05:41,875 --> 00:05:44,870
, то предыдущий подход работает просто хорошо, но если у вас есть

74
00:05:44,870 --> 00:05:48,800
несколько, и особенно если вы повторно используете код во многих компонентах,

75
00:05:48,800 --> 00:05:55,160
, тогда этот рефакторированный подход является гораздо лучшим способом реализации решения.

76
00:05:55,160 --> 00:06:00,250
Следующее обновление, которое я собираюсь сделать, это добавить анимацию об изменениях маршрута.

77
00:06:00,250 --> 00:06:04,670
Итак, когда я перехожу из одного представления в другое представление, так что, например,

78
00:06:04,670 --> 00:06:11,145
из дома в меню или меню для контакта или наоборот,

79
00:06:11,145 --> 00:06:15,350
, тогда я хочу иметь возможность анимировать эти изменения в моем приложении.

80
00:06:15,350 --> 00:06:16,430
Итак, для этого

81
00:06:16,430 --> 00:06:22,480
я введу еще одну функцию в файл animation.ts приложения.

82
00:06:22,480 --> 00:06:24,980
Итак, зайдя в приложение animation.ts файл,

83
00:06:24,980 --> 00:06:33,210
я экспортирую другую функцию, которую я называю FlyInOut,

84
00:06:34,570 --> 00:06:39,325
вы увидите, почему я использую это имя здесь.

85
00:06:39,325 --> 00:06:49,150
Тогда это вернет функцию, которая является триггером с именем FlyInOut.

86
00:06:49,820 --> 00:06:52,380
Итак, внутри был триггер,

87
00:06:52,380 --> 00:06:58,710
я собираюсь определить код для того, что будет делать этот триггер.

88
00:06:59,620 --> 00:07:10,015
Итак, здесь, я определяю состояние здесь с именем звезды,

89
00:07:10,015 --> 00:07:12,445
так что это не имеет значения, какое это состояние,

90
00:07:12,445 --> 00:07:16,820
это применимо к любому состоянию, а затем я определяю

91
00:07:16,820 --> 00:07:22,610
некоторые стили здесь и два стиля, которые я

92
00:07:22,610 --> 00:07:26,600
определяю является непрозрачность является одним из

93
00:07:26,600 --> 00:07:36,915
и преобразование translateX (0),

94
00:07:36,915 --> 00:07:41,355
так что означает, что в этом случае он находится в нормальном положении.

95
00:07:41,355 --> 00:07:45,270
Теперь, когда я определяю переходы,

96
00:07:45,270 --> 00:07:50,880
я также могу определить переходы таким образом.

97
00:07:50,990 --> 00:07:55,090
Итак, если я скажу ввести переход,

98
00:07:55,090 --> 00:07:59,240
переход ввода является сокращенной для того, чтобы сказать, что переход от

99
00:07:59,240 --> 00:08:03,190
void состояния к одному из существующих состояний.

100
00:08:03,190 --> 00:08:06,890
Итак, что означает, что представление входит в мое приложение.

101
00:08:06,890 --> 00:08:10,655
Поэтому введите, что означает, что теперь, когда я направляюсь в

102
00:08:10,655 --> 00:08:15,450
конкретный вид в моем одностраничном приложении,

103
00:08:15,450 --> 00:08:18,500
это представление будет входить в представление.

104
00:08:18,500 --> 00:08:24,325
Итак, вот почему я могу применить переход двоеточие ввода в этом случае.

105
00:08:24,325 --> 00:08:27,725
Теперь аналогичным образом, есть еще один переход под названием двоеточие

106
00:08:27,725 --> 00:08:31,790
оставить, который я могу применить, когда вы переходите из

107
00:08:31,790 --> 00:08:40,580
этого представления, а затем вы берете представление из розетки маршрутизатора вашего приложения.

108
00:08:40,580 --> 00:08:46,950
Итак, мы собираемся сделать как вход, так и другой, который уходит.

109
00:08:52,760 --> 00:08:56,555
Итак, две функции, которые я собираюсь определить здесь,

110
00:08:56,555 --> 00:09:00,155
переход войти и переход оставить здесь.

111
00:09:00,155 --> 00:09:01,730
Итак, для ввода,

112
00:09:01,730 --> 00:09:04,150
что я хочу определить?

113
00:09:04,150 --> 00:09:09,330
Для ввода, позвольте мне определить функцию здесь,

114
00:09:09,330 --> 00:09:11,800
и аналогично, для ухода также,

115
00:09:11,800 --> 00:09:15,815
Я собираюсь определить функции здесь.

116
00:09:15,815 --> 00:09:18,955
Итак, создаем здесь эти леса.

117
00:09:18,955 --> 00:09:25,810
Теперь я могу ввести информацию, которую я хочу в этих переходах.

118
00:09:25,810 --> 00:09:28,025
Итак, когда происходит этот переход,

119
00:09:28,025 --> 00:09:35,590
я начну со стиля преобразования,

120
00:09:36,920 --> 00:09:42,495
translateX минус 100 процентов,

121
00:09:42,495 --> 00:09:47,680
, что означает, что представление полностью вне представления здесь.

122
00:09:47,680 --> 00:09:52,205
Итак, вы начинаете там с минус 100 процентов в этот момент.

123
00:09:52,205 --> 00:09:53,930
Итак, когда вы входите,

124
00:09:53,930 --> 00:09:55,590
вы начнете с этого,

125
00:09:55,590 --> 00:09:58,710
и затем также в этот момент,

126
00:09:58,710 --> 00:10:03,530
я оживлю, и оживлю в 500.

127
00:10:03,530 --> 00:10:05,710
Итак, когда я указываю 500, как это,

128
00:10:05,710 --> 00:10:07,960
вы даже можете сделать это таким образом.

129
00:10:07,960 --> 00:10:10,995
Альтернативно, вы можете сказать, в кавычках,

130
00:10:10,995 --> 00:10:16,900
«500ms», а затем вы даже можете использовать ease-in или ease-out.

131
00:10:16,900 --> 00:10:19,400
Итак, позвольте мне изменить это на

132
00:10:19,400 --> 00:10:28,980
500ms ease-in, потому что это представление приходит.

133
00:10:28,980 --> 00:10:30,790
Итак, мы будем легко- в представлении.

134
00:10:30,790 --> 00:10:37,610
Итак, для отпуска, я буду применять переход как анимированные,

135
00:10:37,610 --> 00:10:45,640
, а затем я бы сказал 500 миллисекунд, снова, ease-out.

136
00:10:45,640 --> 00:10:47,740
Итак, эта точка зрения уходит.

137
00:10:47,740 --> 00:10:50,350
Итак, мы хотим смягчить этот взгляд.

138
00:10:50,350 --> 00:10:52,365
Тогда, в этом случае,

139
00:10:52,365 --> 00:10:55,115
стиль, который я применяю

140
00:10:55,115 --> 00:11:03,880
является преобразование,

141
00:11:04,670 --> 00:11:09,590
translateX 100 процентов.

142
00:11:09,590 --> 00:11:15,370
Таким образом, этот вид полностью исчезнет с экрана там.

143
00:11:15,370 --> 00:11:18,055
Перевести X 100 процентов.

144
00:11:18,055 --> 00:11:23,000
Также я установлю непрозрачность на ноль.

145
00:11:23,000 --> 00:11:25,615
Итак, полностью исчезает с экрана.

146
00:11:25,615 --> 00:11:31,140
Итак, эта анимация добавит здесь хорошую новую функцию.

147
00:11:31,140 --> 00:11:33,570
Теперь, для этого тоже,

148
00:11:33,570 --> 00:11:40,825
я могу добавить, начиная с непрозрачности нуля, если вы предпочитаете.

149
00:11:40,825 --> 00:11:43,730
Давайте добавим это и посмотрим, как это выглядит.

150
00:11:43,730 --> 00:11:48,895
Итак, это триггер flyInOut, который я определил здесь.

151
00:11:48,895 --> 00:11:50,910
Теперь вам, очевидно, интересно,

152
00:11:50,910 --> 00:11:53,690
как я могу использовать этот flyInOut, а затем применить

153
00:11:53,690 --> 00:11:56,650
это для маршрутизации переходов в моем приложении?

154
00:11:56,650 --> 00:11:59,815
Итак, чтобы сделать это, мы перейдем к, во-первых,

155
00:11:59,815 --> 00:12:03,055
, начиная с файла menu component.ts.

156
00:12:03,055 --> 00:12:04,810
Я собираюсь импортировать

157
00:12:04,810 --> 00:12:13,220
flyInOut

158
00:12:14,730 --> 00:12:25,820
из анимации приложения.

159
00:12:27,090 --> 00:12:31,230
Затем, перейдя к компоненту,

160
00:12:31,230 --> 00:12:35,425
Теперь я собираюсь ввести новое свойство, называемое как хост.

161
00:12:35,425 --> 00:12:39,445
Я расскажу вам, что попадет в хост в течение короткого времени.

162
00:12:39,445 --> 00:12:42,939
Затем мы также включим свойство анимации,

163
00:12:42,939 --> 00:12:45,470
, который является массивом здесь.

164
00:12:45,470 --> 00:12:50,980
Тогда, внутри, я буду использовать flyInOut, который мы только что импортировали.

165
00:12:50,980 --> 00:12:59,325
Таким образом, этот триггер анимации будет применен к этому медиакомпоненту.

166
00:12:59,325 --> 00:13:00,660
Теперь, внутри хоста,

167
00:13:00,660 --> 00:13:07,975
, так что я гарантирую, что эта конкретная анимация происходит при изменении маршрута.

168
00:13:07,975 --> 00:13:11,215
Итак, внутри этого хоста здесь,

169
00:13:11,215 --> 00:13:15,560
я поставлю это как сказать,

170
00:13:17,070 --> 00:13:22,705
@flyInOut и сказать true,

171
00:13:22,705 --> 00:13:28,730
, и это должно быть заключено в кавычки также,

172
00:13:29,370 --> 00:13:41,660
@flyInOut, true, а затем стиль,

173
00:13:42,000 --> 00:13:45,595
блок отображения.

174
00:13:45,595 --> 00:13:52,330
Таким образом, эти два должны быть применены внутри свойства хоста здесь.

175
00:13:52,330 --> 00:13:56,410
Теперь, когда мы это сделаем, мой компонент меню теперь начнет анимацию

176
00:13:56,410 --> 00:14:00,440
, когда я направляюсь в компонент меню,

177
00:14:00,440 --> 00:14:02,965
, а затем и когда я покидаю компонент меню.

178
00:14:02,965 --> 00:14:10,705
Теперь я применим то же самое к остальным компонентам моего углового приложения.

179
00:14:10,705 --> 00:14:12,720
Итак, что я сделаю, это

180
00:14:12,720 --> 00:14:15,260
Я просто скопирую это,

181
00:14:15,850 --> 00:14:20,910
, а затем мы применим это к компоненту about.

182
00:14:20,910 --> 00:14:23,545
Итак, я перейду к компоненту о.

183
00:14:23,545 --> 00:14:25,555
В компоненте декоратор

184
00:14:25,555 --> 00:14:28,650
я включил информацию здесь,

185
00:14:28,650 --> 00:14:34,070
, и вы видите красную линию squiggly, которая напоминает мне, что мне нужно импортировать

186
00:14:34,080 --> 00:14:42,255
flyInOut из анимации, анимации приложения.

187
00:14:42,255 --> 00:14:46,410
Итак, тот же подход, о компоненте,

188
00:14:46,410 --> 00:14:52,080
то в компоненте контакта также, то же самое,

189
00:15:08,840 --> 00:15:17,980
, а затем применить свойства хоста и анимации к компоненту декоратор,

190
00:15:17,980 --> 00:15:21,660
и то, что еще у нас есть?

191
00:15:21,660 --> 00:15:28,040
Домашний компонент. Давайте перейдем к домашнему компоненту и повторим то же самое здесь.

192
00:15:28,040 --> 00:15:33,385
Я добавлю в хост и свойство анимации

193
00:15:33,385 --> 00:15:36,210
, а затем иду вперед и импортировать

194
00:15:36,210 --> 00:15:50,210
flyInOut, из анимации приложения.

195
00:15:50,350 --> 00:15:56,235
Мы пропустили что-нибудь? О, нам также нужно обновить деталь блюда.

196
00:15:56,235 --> 00:15:58,360
Итак, позвольте мне перейти к компоненту детали блюда.

197
00:15:58,360 --> 00:16:00,840
Поскольку у нас уже есть видимость там,

198
00:16:00,840 --> 00:16:04,435
я просто собираюсь импортировать flyInOut.

199
00:16:04,435 --> 00:16:08,920
Затем, так как мы уже создали остальные части здесь,

200
00:16:08,920 --> 00:16:12,665
Я собираюсь войти и вставить этот код,

201
00:16:12,665 --> 00:16:17,125
и, очевидно, у меня есть две анимации здесь.

202
00:16:17,125 --> 00:16:20,860
Позвольте мне вырезать видимость отсюда, а затем добавить

203
00:16:20,860 --> 00:16:29,420
его в другую анимацию,

204
00:16:29,420 --> 00:16:35,040
, а затем вырезать это, так что у меня есть одно свойство анимации с

205
00:16:35,040 --> 00:16:40,780
как flyInOut, так и функции видимости, которые включены и вызываются там,

206
00:16:40,780 --> 00:16:42,630
, а затем свойство хоста.

207
00:16:42,630 --> 00:16:45,625
Теперь давайте сохраним изменения, а затем взглянем на

208
00:16:45,625 --> 00:16:51,370
новую анимацию, которую мы только что применили к нашим компонентам.

209
00:16:51,370 --> 00:16:56,475
Начинаем с видом на дом.

210
00:16:56,475 --> 00:16:59,000
Итак, у нас есть домашний вид, который отображается здесь.

211
00:16:59,000 --> 00:17:02,500
Позвольте мне теперь быстро перейти к представлению «О программе»

212
00:17:02,500 --> 00:17:05,800
, а затем вы увидите, что представление «О программе» просто скользит в то время как

213
00:17:05,800 --> 00:17:09,780
вид «Главная» скользит на экран здесь.

214
00:17:09,780 --> 00:17:11,810
Аналогично, когда я перехожу в меню,

215
00:17:11,810 --> 00:17:16,190
вы увидите, что представление Меню скользит в то время как представление «О программе» выскользнет.

216
00:17:16,190 --> 00:17:20,240
Это так быстро, что вы не замечаете его как такового.

217
00:17:20,240 --> 00:17:22,740
Аналогично, для представления «Контакт»

218
00:17:22,740 --> 00:17:24,710
вы видите, что вид контакта скользит в.

219
00:17:24,710 --> 00:17:28,940
Таким образом, этот вид анимации может быть добавлен с помощью

220
00:17:28,940 --> 00:17:34,170
этот подход, который мы только что проиллюстрировали для вашего углового приложения.

221
00:17:34,170 --> 00:17:40,375
Мы еще не закончили. Мы сделаем еще одну анимацию в нашем приложении.

222
00:17:40,375 --> 00:17:44,955
Чтобы проиллюстрировать, что я хотел бы сделать в следующей анимации,

223
00:17:44,955 --> 00:17:48,495
давайте быстро посмотрим на компонент меню.

224
00:17:48,495 --> 00:17:50,780
Итак, вы видите, что когда компонент меню,

225
00:17:50,780 --> 00:17:54,830
, когда спиннер вращается, а затем получает замену на вид,

226
00:17:54,830 --> 00:17:57,180
вид вдруг появляется на экране,

227
00:17:57,180 --> 00:17:59,740
и это немного обжаривает глаз.

228
00:17:59,740 --> 00:18:01,230
Вы можете этого не заметить.

229
00:18:01,230 --> 00:18:03,725
Вы можете быть вполне довольны этим.

230
00:18:03,725 --> 00:18:07,340
Но мы можем добавить таким образом, чтобы облегчить в

231
00:18:07,340 --> 00:18:12,235
это представление, когда данные извлекаются с сервера и представление визуализируется в.

232
00:18:12,235 --> 00:18:20,625
Итак, когда переменная блюда в моем файле menu component.ts становится не нулевым,

233
00:18:20,625 --> 00:18:27,290
то счетчик будет скрыт, а затем вид блюда,

234
00:18:27,290 --> 00:18:30,320
меню строится и затем выложено.

235
00:18:30,320 --> 00:18:33,060
Итак, мы хотим, чтобы это облегчило экран.

236
00:18:33,060 --> 00:18:38,820
Итак, давайте добавим еще одну анимацию, чтобы эффект, как в компоненте меню.

237
00:18:38,820 --> 00:18:42,055
Мы также применим то же самое в компоненте детализации блюда.

238
00:18:42,055 --> 00:18:46,540
Мы также будем использовать то же самое в компоненте «Главная» и компоненте «О программе»

239
00:18:46,540 --> 00:18:51,550
, где мы извлекаем данные, чтобы показать список лидеров.

240
00:18:51,550 --> 00:18:56,145
Итак, везде, где вы извлекаете данные с сервера, а затем выкладываете представление,

241
00:18:56,145 --> 00:18:57,740
, когда появляется представление,

242
00:18:57,740 --> 00:19:03,275
мы хотим облегчить представление, используя эту новую анимацию, которую я собираюсь создать дальше.

243
00:19:03,275 --> 00:19:06,230
Перейдя к файлу animation.ts приложения,

244
00:19:06,230 --> 00:19:08,615
Я собираюсь добавить в другую функцию здесь,

245
00:19:08,615 --> 00:19:14,750
и позвольте мне назвать его расширением.

246
00:19:14,750 --> 00:19:18,200
Эта функция расширит представление, которое выкладывается

247
00:19:18,200 --> 00:19:22,370
после получения данных со стороны сервера.

248
00:19:22,370 --> 00:19:24,885
Итак, это представление, опять же,

249
00:19:24,885 --> 00:19:28,370
я верну триггер здесь.

250
00:19:28,370 --> 00:19:32,280
Я назовем триггер как расширение,

251
00:19:32,280 --> 00:19:37,690
и этот триггер будет создан.

252
00:19:37,890 --> 00:19:40,590
Как определить этот триггер.

253
00:19:40,590 --> 00:19:49,870
Итак, внутри этого триггера мы собираемся включить состояние со звездой.

254
00:19:49,870 --> 00:19:51,920
Так что не имеет значения, в каком это состоянии.

255
00:19:51,920 --> 00:20:00,580
Все состояния будут отображены со стилем

256
00:20:00,580 --> 00:20:10,420
непрозрачность одного преобразования x 0.

257
00:20:10,420 --> 00:20:16,430
Таким образом, он отображается справа и по центру в моем приложении.

258
00:20:17,520 --> 00:20:20,990
Это должна быть скобка.

259
00:20:20,990 --> 00:20:23,250
Я смотрел на него и сказал,

260
00:20:23,250 --> 00:20:25,735
Почему он показывает красную черту.

261
00:20:25,735 --> 00:20:29,560
Итак, когда вы печатаете очень быстро, вы часто совершаете ошибки там.

262
00:20:29,560 --> 00:20:31,070
Итак, вместо квадратной скобки

263
00:20:31,070 --> 00:20:34,205
, что должна быть скобка там.

264
00:20:34,205 --> 00:20:35,915
Так вот, это государство.

265
00:20:35,915 --> 00:20:44,925
Таким образом, любое состояние, которое будет полностью видно и центрировано там, где оно должно быть центрировано.

266
00:20:44,925 --> 00:20:49,180
Теперь позвольте мне запустить переход.

267
00:20:49,180 --> 00:20:51,730
Теперь этот переход будет запускаться только

268
00:20:51,730 --> 00:20:55,465
при входе, когда представление будет выложено на экране.

269
00:20:55,465 --> 00:21:00,740
Выход части мы уже делаем это в анимации маршрута, так что нам это не нужно.

270
00:21:00,740 --> 00:21:03,060
Нам нужна только inter часть для этого представления, потому что

271
00:21:03,060 --> 00:21:06,575
вид отображается на этом экране там.

272
00:21:06,575 --> 00:21:08,435
Итак, в enter

273
00:21:08,435 --> 00:21:14,625
я собираюсь определить переход соответствующим образом.

274
00:21:14,625 --> 00:21:18,860
Итак, в переходный период, что я хочу делать?

275
00:21:18,860 --> 00:21:27,260
Я хочу применить тот же подход, который я использовал с переходом ввода здесь.

276
00:21:27,260 --> 00:21:32,600
Итак, я просто скопирую это, а затем внесу некоторые незначительные изменения в код.

277
00:21:32,600 --> 00:21:36,335
Итак, для ввода перехода здесь также,

278
00:21:36,335 --> 00:21:38,490
я хочу применить то же самое.

279
00:21:38,490 --> 00:21:42,040
Я скажу перевести Insta из 100 процентов.

280
00:21:42,040 --> 00:21:46,630
Я собираюсь просто использовать 50 процентов, а затем я сделаю перевод Y.

281
00:21:46,630 --> 00:21:52,460
So, что означает, что это представление упадет с топ-50 перветов, начиная с

282
00:21:52,460 --> 00:21:58,655
непрозрачности нуля, а затем я облегчу его в немного быстрее,

283
00:21:58,655 --> 00:22:04,200
200 миллисекунд и облегчит его в наше приложение.

284
00:22:04,200 --> 00:22:09,640
Итак, вы видите небольшую корректировку кода здесь.

285
00:22:09,640 --> 00:22:14,845
Итак, перевести минус 50 процентов и непрозрачность ноль и

286
00:22:14,845 --> 00:22:21,025
это облегчается в 200 миллисекунд, а затем в этот момент,

287
00:22:21,025 --> 00:22:27,105
я могу применить этот стиль как этот же стиль.

288
00:22:27,105 --> 00:22:32,240
Я подам заявку. Итак, я просто скопирую этот стиль, а затем применим этот стиль.

289
00:22:32,240 --> 00:22:34,440
Итак, когда он будет облегчен,

290
00:22:34,440 --> 00:22:40,115
он войдет и будет полностью виден там, где он должен быть.

291
00:22:40,115 --> 00:22:43,735
Итак, это функция расширения, которую я определил здесь.

292
00:22:43,735 --> 00:22:45,950
Итак, где я хочу использовать эту функцию?

293
00:22:45,950 --> 00:22:52,060
Мы перейдем сначала к компоненту меню и внутри компонента меню,

294
00:22:52,060 --> 00:22:55,530
Я теперь также импортирую,

295
00:22:55,530 --> 00:23:04,595
расширить, а затем добавить его в мои анимации, а затем, как я могу применить это расширение?

296
00:23:04,595 --> 00:23:08,160
Итак, перейдя в этот файл шаблона компонентов меню.

297
00:23:08,160 --> 00:23:09,925
В файле шаблона

298
00:23:09,925 --> 00:23:12,840
я собираюсь применить расширение к

299
00:23:12,840 --> 00:23:20,435
список сетки, где я применяю это.

300
00:23:20,435 --> 00:23:24,960
Итак, позвольте мне скопировать это, а затем также мы пойдем

301
00:23:24,960 --> 00:23:32,230
к домашнему компоненту и внутри домашнего компонента также,

302
00:23:32,230 --> 00:23:42,590
Я собираюсь включить расширение, а затем добавить расширение в анимацию,

303
00:23:43,430 --> 00:23:49,475
, а затем перейти к домашнему компоненту шаблона, а затем я буду применять

304
00:23:49,475 --> 00:23:57,060
, которые расширяются к компонентам блюда MD карты,

305
00:23:57,060 --> 00:24:02,695
к компонентам продвижения MD карты, а также к лидеру

306
00:24:02,695 --> 00:24:05,580
компонентов MD карты здесь, потому что все эти

307
00:24:05,580 --> 00:24:09,880
три будут извлечены в будущем с сервера, а затем визуализированы.

308
00:24:09,880 --> 00:24:15,075
Таким образом, данные о компонентах блюда уже извлекаются с сервера.

309
00:24:15,075 --> 00:24:20,080
Теперь то же самое происходит в компоненте DishDetail.

310
00:24:20,080 --> 00:24:27,000
Я собираюсь добавить в расширение к импорту, а затем добавить

311
00:24:27,000 --> 00:24:35,530
расширение в анимацию, идущее в представление компонента DishDetail.

312
00:24:35,530 --> 00:24:37,415
Наряду с видимостью

313
00:24:37,415 --> 00:24:40,095
я также применим расширение на

314
00:24:40,095 --> 00:24:47,705
карты div там, а затем к комментариям div также здесь.

315
00:24:47,705 --> 00:24:50,720
Это в компоненте DishDetail.

316
00:24:50,720 --> 00:24:54,530
Компонент контакта не имеет ничего, что извлекается с сервера.

317
00:24:54,530 --> 00:25:00,265
Итак, я просто перейду к компоненту о компоненте и в компоненте о,

318
00:25:00,265 --> 00:25:08,680
я буду включать расширение, а также в анимации.

319
00:25:08,680 --> 00:25:12,870
Перейдя к файлу шаблона компонентов здесь этот тест

320
00:25:12,870 --> 00:25:17,190
здесь, который показывает, что лидеры извлекаются со стороны сервера.

321
00:25:17,190 --> 00:25:20,310
Итак, я собираюсь применить расширение над этим.

322
00:25:20,310 --> 00:25:23,250
Давайте сохраним изменения, а затем пойдем и посмотрим

323
00:25:23,250 --> 00:25:26,960
на наше угловое приложение в браузере.

324
00:25:26,960 --> 00:25:29,235
Идем в наше угловое приложение.

325
00:25:29,235 --> 00:25:31,665
Теперь, когда вы идете в домашний шаблон,

326
00:25:31,665 --> 00:25:34,700
вы можете видеть, что карты, когда они были получены,

327
00:25:34,700 --> 00:25:38,070
они скользнул в мой взгляд там.

328
00:25:38,070 --> 00:25:40,970
Теперь, аналогично, когда вы идете к компоненту о,

329
00:25:40,970 --> 00:25:45,050
вы видите, что как только данные извлекаются с сервера,

330
00:25:45,050 --> 00:25:50,470
то рендеринг различных лидеров является

331
00:25:50,470 --> 00:25:56,590
скользить в так медленно в позицию в этом представлении здесь.

332
00:25:56,590 --> 00:25:58,905
Аналогично, перейдя к компоненту меню,

333
00:25:58,905 --> 00:26:01,270
мы увидим такое же поведение здесь.

334
00:26:01,270 --> 00:26:03,595
Итак, как только данные меню будут готовы,

335
00:26:03,595 --> 00:26:07,065
компонент меню скользит на место прямо там.

336
00:26:07,065 --> 00:26:09,980
То же самое с деталями блюда.

337
00:26:09,980 --> 00:26:12,490
Итак, позвольте мне перейти к компоненту DishDetail, и вы увидите, что

338
00:26:12,490 --> 00:26:15,250
вид скользит на место, но

339
00:26:15,250 --> 00:26:18,495
другая анимация, которая была

340
00:26:18,495 --> 00:26:22,625
исчезает и вновь появляется эта часть, все еще работает так же, как и раньше.

341
00:26:22,625 --> 00:26:32,755
Итак, вы видите, что мы ввели еще одну анимацию в наше угловое приложение.

342
00:26:32,755 --> 00:26:38,555
Теперь, нравится ли вам это или вы хотите сделать более сложный способ сделать анимацию,

343
00:26:38,555 --> 00:26:41,605
конечно, вы можете сходить с ума с

344
00:26:41,605 --> 00:26:45,395
делать много различных вещей с вашей анимацией.

345
00:26:45,395 --> 00:26:52,395
Изменение многих различных свойств в стилях, как вам нравится и так далее.

346
00:26:52,395 --> 00:26:57,060
Но я чувствовал, что несколько тонких анимаций здесь и там

347
00:26:57,060 --> 00:27:02,390
помогут улучшить пользовательский интерфейс для моего углового приложения.

348
00:27:02,390 --> 00:27:08,195
Итак, я добавил еще две новые анимации в свое угловое приложение.

349
00:27:08,195 --> 00:27:14,535
С этим мы завершаем вторую часть нашего упражнения анимации.

350
00:27:14,535 --> 00:27:18,240
Я надеюсь, что с этими двумя частями упражнения,

351
00:27:18,240 --> 00:27:21,280
вы лучше поняли о том, как использовать

352
00:27:21,280 --> 00:27:24,555
анимации в вашем угловом приложении.

353
00:27:24,555 --> 00:27:32,040
Это хорошее время для вас, чтобы сделать git commit с сообщением, анимация часть вторая.