Что нового в Angular v5: Анимация

Что нового в Angular v5: Анимация

От автора: Angular версия 5 уже вышел, а с ним пришла и новая волна функций. В этой статье я хочу рассмотреть, что нового принесла нам в Angular анимация.

Отрицательные лимиты в запросе

Запросы анимации теперь поддерживают отрицательные лимиты, и в этом случае они будут соответствовать элементам с конца, а не с начала. Например:

animations: [
  trigger(
 'query', [
 transition(
 '* => start', [
 query('.item', [style({
 opacity: 0
 }), animate('2s', style({
 opacity: 1
 }))], {
 limit: -3
 }),
 ]),
 ]),
]

Улучшено свойство disabled

Свойство @.disabled теперь работает без выражения. Когда выражение отсутствует, оно будет оцениваться, как true. Например:

// Анимация будет отключена
<div @.disabled>
  <div [@animate]="expression">Animate</div>
</div>

Улучшена обработка ошибок

Angular теперь выдает ошибку, когда в анимации используется недопустимое свойство CSS. Например:

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее
style ({opacity: 0, tranforn: 'translateX (0)'})

Выдает:

Что нового в Angular v5: Анимация

Новые алиасы

Поддержка алиасов переходов :increment и :decrement. В дополнение к алиасам :enter и :leave, алиасы :increment и :decrement могут использоваться для запуска перехода, когда увеличилось или уменьшилось числовое значение. Например:

animations: [
  trigger('slider', [
 transition(":increment", group([
 query(':enter', [
 style({
 left: '100%'
 }),
 animate('0.5s ease-out', style('*'))
 ]),
 query(':leave', [
 animate('0.5s ease-out', style({
 left: '-100%'
 }))
 ])
 ])),
 transition(":decrement", group([
 query(':enter', [
 style({
 left: '-100%'
 }),
 animate('0.5s ease-out', style('*'))
 ]),
 query(':leave', [
 animate('0.5s ease-out', style({
 left: '100%'
 }))
 ])
 ]))
  ])
]

Что нового в Angular v5: Анимация

Автор: Netanel Basal

Источник: https://netbasal.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Angular 4. Быстрый старт

Овладейте азами работы с Angular 4 с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree