[МУЗЫКА]
Как мы узнали в предыдущей лекции,
анимации добавляют большую ценность вашему приложению.
Это добавляет лучший пользовательский опыт.
Теперь, очевидно, это не означает, что вы бросаете анимацию по всему месту
только ради анимации.
Вы ставите анимацию, чтобы сделать пользовательский опыт лучше.
В этом упражнении мы сделаем нашу первую анимацию
в рамках нашего углового приложения, которое мы разработали до сих пор.
И по пути
узнает, как анимация может быть реализована в угловом приложении.
Мы продолжим этот поток во второй части упражнения, где
мы добавим больше анимации в наше угловое приложение.
Когда мы начали этот курс, в самом первом упражнении с Angular,
мы уже добавили в модуль анимации в наше угловое приложение
в app.module.ts5, поэтому мы импортировали модуль анимации прямо там.
Теперь следующим шагом является перейти к компонентам и
затем добавить в анимацию везде, где это требуется.
Первая анимация, которую мы собираемся добавить, находится в компоненте dishdetail здесь.
Итак, перейдя к компоненту dishdetail,
позвольте мне импортировать несколько классов здесь.
Я буду импортировать триггер, состояние, стиль
, анимировать и переход от.
@angular /анимации.
Теперь, как только мы импортируем их, мы можем использовать их в создании нашей анимации.
Итак, как добавить анимацию к компоненту?
Добавим триггеры анимации в компонентный декоратор здесь.
Таким образом, войдя в компонент декоратора после стилей URL,
и добавить в анимации как свойство внутри.
А затем здесь я собираюсь определить триггер,
который я называю триггером видимости, и
я собираюсь определить триггер видимости внутри здесь.
Теперь для этого триггера видимости
я определяю два состояния, я определяю одно
состояние, как показано на рисунке, и я определяю второе состояние
как, Скрытый.
Так что у меня есть гибкость определения моих состояний вот так.
Итак, для показанного состояния, что я хочу применить?
Таким образом, для показанного состояния я буду применять стиль следующим образом,
так что стили, которые я собираюсь применить для
показанного состояния, я сделаю преобразование, и
преобразование, которое я собираюсь применить, является шкалой 1.0.
Поэтому я хочу показать его в
его нормальный размер и
непрозрачность 0.
Так вот как я определяю отображаемый стиль.
Итак, и скрытое состояние я определяю стиль как,
Transform, я скажу масштаб (0.5).
Вы можете поиграть с этими числами
, чтобы увидеть, является ли анимация тем, что вы хотите.
Я также играл с этими номерами, пока не получил то, что я был
доволен.
И 0, или для их дальнейшего показанного состояния, я поставлю непрозрачность как 1.
Непрозрачность 1 означает, что она полностью видна.
Непрозрачность 0 означает, что она полностью скрыта.
Теперь я определил два состояния здесь, показано и здесь в состоянии.
Теперь, переход между этими двумя состояниями,
я собираюсь определить здесь, как, всякий раз, когда я перехожу из любого состояния в любое состояние,
не имеет значения, в какое состояние я двигаюсь,
преобразование выполняется с анимацией 0,5 секунд,
или 500 миллисекунд.
И я успокоюсь.
Итак, здесь я указываю, что если я перейду из показанного в скрытое состояние или
из скрытого в отображаемое состояние, я перейду в течение 0,5 секунд или 500 миллисекунд.
И затем, я сделаю переход, облегчая входы и выход, так что
это не будет линейным переходом, он будет медленно идти и
затем облегчать переход, так что
, что это не будет вяленким переходом от одного к другому.
Таким образом, вы можете использовать эту легкость в или ease-in-out
, чтобы указать, как вы хотите, чтобы переход произошел.
Итак, теперь для этой анимации я указал
видимость в качестве триггера для этой анимации.
Теперь, чтобы эта анимация работала правильно,
я перейду в свой DishdetailComponent, а затем я укажу,
внутри этого компонента, начальное значение видимости.
Итак, я скажу, что видимость
изначально установлена на показанный, а затем,
всякий раз, когда я меняюсь с одного блюда на другое.
И это случается всякий раз, когда я приношу блюдо здесь.
Поэтому всякий раз, когда я меняю блюдо с одного блюда на другое,
это вызывается всякий раз, когда изменяется параметр маршрута.
Так что в этот момент я собираюсь применить анимацию.
Я заставлю триггер перейти от показанного к скрытому состоянию, а затем обратно из скрытого в показанное состояние, когда блюдо доступно.
Так что применить это преобразование.
Поэтому я собираюсь приложить это утверждение внутри
блок здесь в этой функции стрелки.
А затем также определить эту видимость здесь как.
Поэтому, когда я перехожу из одного состояния в другое, поэтому
, когда я начинаю извлекать информацию о блюде со стороны сервера,
я сначала скрою текущее блюдо, установив значение видимости
на скрытое, что означает, что текущее блюдо, которое отображается
, будет скрыто от представления.
И тогда, когда новое блюдо станет доступным, оно снова появится в поле зрения.
Итак, чтобы сделать это, когда мое блюдо станет доступным во второй части,
в подписной части, я скажу в качестве последнего заявления в этом блоке,
я скажу, что эта видимость равна показанной здесь.
Так что мой взгляд становится видимым в этот момент.
Теперь я не применяю это к сообщению об ошибке, потому что я собираюсь применить эту видимость только к тем частям моего шаблона
, где мое блюдо действительно отображается.
Теперь, если есть ошибка, то я просто хочу скрыть правильное блюдо.
Затем покажите только сообщение об ошибке в представлении.
Итак, с этими изменениями в моем DishdetailComponent.
Итак, вы можете снова увидеть, объясняя это в нем еще раз.
Когда я начну извлекание нового блюда при изменении параметров маршрута,
я установлю видимость на скрытую так
, что текущее блюдо, отображаемое в представлении, будет скрываться.
И тогда, когда новое блюдо становится доступным, так что произойдет, когда
подписка вызывается, когда это наблюдаемое становится доступным.
А потом, когда блюдо становится доступным, а затем,
я поставил это блюдо на блюдо, которое пришло из наблюдаемого.
В этот момент я восстановлю видимость до этого показанного состояния.
Итак, что мое новое блюдо, которое я приготовил, может быть показано на экране.
С этим изменением я теперь перехожу к файлу шаблона
и в файле шаблона я собираюсь применить
видимость обоих блюдо здесь.
Таким образом, первый div, где я показываю блюдо, я буду
применить триггер видимости к блюду.
И тогда я установлю это равным
Видимость, которая является переменной, которую я определил в коде.
Теперь я применяю это к блюду здесь, а также применяю то же самое
ко второму div, где я показываю комментарии.
И вот оно.
Так что позвольте мне сохранить все изменения, а затем мы пойдем и
посмотрим, как работает эта анимация в нашем примере.
Перейдя в браузер, теперь я показываю им меню.
Позвольте мне выбрать одно из блюд, а затем перейти в вид блюд здесь.
Поэтому, когда блюдо отображается, обратите внимание, что в любое время я перейду от
это блюдо к следующему блюду, поэтому, нажав вправо.
Затем это блюдо исчезает, а затем, когда новое блюдо становится доступным,
вид снова становится видимым, а затем отображается новое блюдо.
Аналогичным образом, я могу сделать еще один, а затем заметить, что новое блюдо
, как только информация становится доступной, оно становится снова видимым.
Так что это переход, который я применяю в этом примере здесь.
Итак, возвращаясь назад, вы можете увидеть, что такое же поведение снова повторяется.
Это небольшое изменение пользовательского интерфейса
добавляет большое значение тому, как пользователь воспринимает ваше приложение.
Как вы понимаете, это не добавляет много функциональности вашего приложения
, но добавляет лучший пользовательский интерфейс.
И именно здесь мы применяем анимацию разумно в нашем приложении
, чтобы сделать определенный пользовательский опыт более значимым
для пользователя, который просматривает ваше угловое приложение, или
просмотр вашего мобильного приложения, которое мы увидим в последующих курсах.
Это завершает это упражнение по анимации.
Мы продолжим исследования анимации во второй части упражнения
, которая появится сразу после этого.
Это хорошее время для вас, чтобы сделать комментарий Git с анимацией сообщений,
часть первая.
[МУЗЫКА]