Від автора: Angular версія 5 вже вийшов, а з ним прийшла і нова хвиля функцій. У цій статті я хочу розглянути, що нового принесла нам в Angular анімація.
Негативні ліміти у запиті
Запити анімації тепер підтримують негативні ліміти, і в цьому випадку вони будуть відповідати елементам з кінця, а не з початку. Наприклад:
animations: [
trigger(
‘query’, [
transition(
‘* => start’, [
query(‘.item’, [style({
opacity: 0
}), animate(‘2s’, style({
opacity: 1
}))], {
limit: -3
}),
]),
]),
]
Покращено властивість disabled
Властивість @.disabled тепер працює без виразу. Коли вираз відсутнє, воно буде оцінюватися, як true. Наприклад:
// Анімація буде вимкнено
Покращена обробка помилок
Angular тепер видає помилку, коли в анімації неприпустиме властивість CSS. Наприклад:
style ({opacity: 0, tranforn: ‘translateX (0)’})
Видає:
Нові аліаси
Підтримка аліасів переходів :increment :decrement. На додаток до алиасам :enter і :leave, аліаси :increment :decrement можуть використовуватися для запуску переходу, коли збільшилось або зменшилось числове значення. Наприклад:
animations: [
trigger(‘slider’, [
transition(“:increment”, group([
query(‘:enter’, [
style({
left: ‘100%’
}),
animate(‘0.5 s ease-out’, style(‘*’))
]),
query(‘:leave’, [
animate(‘0.5 s ease-out’, style({
left: ‘-100%’
}))
])
])),
transition(“:decrement”, group([
query(‘:enter’, [
style({
left: ‘-100%’
}),
animate(‘0.5 s ease-out’, style(‘*’))
]),
query(‘:leave’, [
animate(‘0.5 s ease-out’, style({
left: ‘100%’
}))
])
]))
])
]
