Що нового в Angular v5: Анімація

17

Від автора: Angular версія 5 вже вийшов, а з ним прийшла і нова хвиля функцій. У цій статті я хочу розглянути, що нового принесла нам в Angular анімація.

Негативні ліміти у запиті

Запити анімації тепер підтримують негативні ліміти, і в цьому випадку вони будуть відповідати елементам з кінця, а не з початку. Наприклад:

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

Покращено властивість disabled

Властивість @.disabled тепер працює без виразу. Коли вираз відсутнє, воно буде оцінюватися, як true. Наприклад:

// Анімація буде вимкнено

Animate

Покращена обробка помилок

Angular тепер видає помилку, коли в анімації неприпустиме властивість CSS. Наприклад:

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.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%’
}))
])
]))
])
]

Що нового в Angular v5: Анімація