От автора: Angular версия 5 уже вышел, а с ним пришла и новая волна функций. В этой статье я хочу рассмотреть, что нового принесла нам в Angular анимация.
Отрицательные лимиты в запросе
Запросы анимации теперь поддерживают отрицательные лимиты, и в этом случае они будут соответствовать элементам с конца, а не с начала. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
animations: [ trigger( 'query', [ transition( '* => start', [ query('.item', [style({ opacity: 0 }), animate('2s', style({ opacity: 1 }))], { limit: -3 }), ]), ]), ] |
Улучшено свойство disabled
Свойство @.disabled теперь работает без выражения. Когда выражение отсутствует, оно будет оцениваться, как true. Например:
1 2 3 4 |
// Анимация будет отключена <div @.disabled> <div [@animate]="expression">Animate</div> </div> |
Улучшена обработка ошибок
Angular теперь выдает ошибку, когда в анимации используется недопустимое свойство CSS. Например:
1 |
style ({opacity: 0, tranforn: 'translateX (0)'}) |
Выдает:
Новые алиасы
Поддержка алиасов переходов :increment и :decrement. В дополнение к алиасам :enter и :leave, алиасы :increment и :decrement могут использоваться для запуска перехода, когда увеличилось или уменьшилось числовое значение. Например:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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%' })) ]) ])) ]) ] |
Автор: Netanel Basal
Источник: //netbasal.com/
Редакция: Команда webformyself.
Комментарии (1)