در قسمت قبل کلیات نحوهی استفاده از Animation در Angular را مورد بررسی
قرار دادیم. در این بخش قصد داریم نحوهی اعمال Animation های پیشرفتهتری
را مورد بررسی قرار دهیم.
وضعیت void
این وضعیت به تمامی المانهایی که به view متصل نیستند،
اعمال خواهد شد. این عدم اتصال به view برای یک المان میتواند بخاطر این باشد که این المان هنوز به صفحه
وارد نشده است یا اینکه قبلا در صفحه بوده و الان در حال حذف شدن است.
درکل وضعیت void برای تعریف انیمیشنی در هنگام ورود و خروج المان به و از صفحه مورد
استفاده قرار میگیرد. برای مثال گذار *=>void به تمامی المانهایی که view را ترک میکنند اعمال خواهد شد و void=>* به المانهایی
که به view اضافه میشوند.
قطعه کد زیر سبب تعریف انیمیشنی بر روی المنتهای ورودی و
خروجی از صفحه خواهد شد:
animations: [
trigger('flyInOut', [
transition('void => *', [
style({transform: 'translateX(-100%)'}),
animate(100)
]),
transition('* => void', [
animate(100, style({transform: 'translateX(100%)'}))
])
])
]
در این قطعه کد یک trigger به نام flyInOut تعریف شده است که در آن برای گذار ورود و خروج المنت در صفحه،
انیمیشن تعریف شده است. همانطور که واضح است نیازی به تعریف حالت void، توسط تابع state وجود ندارد.
کد زیر نحوه استفاده از این trigger را نشان میدهد
(با فرض اینکه لیستی از کاربران را در متغییر users داریم که با
فراخوانی متد addNewUser یک آیتم به آن اضافه شده و با زدن دکمه Remove آیتم مورد نظر
از لیست حذف میشود):
<ul>
<li *ngFor="let user of users" [@flyInOut]>
{{user.FirstName}}
<button (click)="remove(user)">Remove</button>
</li>
</ul>
<button (click)="addNewUser()">Add New User</button>
همچنین به جای void=>* در تابع transition، از :enter و به جای *=>void،
از :leave میتوان استفاده کرد.
transition(':enter', [ ... ]); // void => *
transition(':leave', [ ... ]); // * => void
واضح است که شما میتوانید از حالت void به هر حالت
تعریف شدهی توسط خودتان نیز گذاری را تعریف کنید. برای مثال اگر قبلا حالت active و inactive را با استفاده
از تابع state
ساخته باشید، گذارهای زیر قابل تعریف خواهند بود و هیچگونه محدودیتی وجود نخواهد
داشت:
transition('void => inactive', //...)
transition('inactive => void', //...)
transition('void => active', //..)
transition('active => void', //...)
کاربرد * در style
فرض کنید میخواهیم گذاری را تعریف کنیم که هنگام ورود
المنت، در ابتدا ارتفاع المنت را به مقداری 0px تنظیم
کرده و سپس همراه با یک انیمیشن، مقدار ارتفاع را به مقدار اصلی تنظیم خواهد کرد. چالشی
که در اینجا وجود دارد این است که مقدار ارتفاع المنت مشخص نیست و بستگی به اندازه
صفحه نمایش داشته و توسط آن css تنظیم
خواهد شد. در اینجا میتوان از * برای
بدست آورن مقدار جاری یک خصوصیت از استایل استفاده کرد:
transition('void => *', [
style({height: 0 }),
animate(1000,style({ color: '*' }))
]),
انیمیشن چند مرحلهای با استفاده از Keyframes
تا اینجا تمامی انیمیشنهایی را که بررسی کردیم، یک انیمیشن یک
مرحلهای بودند. در صورتیکه یک انیمیشن حرفهای، متشکل از چند مرحله گذار خواهد
بود. برای انجام اینکار از تابع Keyframes استفاده میکنیم. برای مثال میخواهیم انیمیشن ورود المنت را به صورتی
در نظر بگیریم که المنت در ابتدا در نقطه -75% بالاتر از
مکانیکه در آنجا نمایش داده خواهد شد، با opacity صفر شروع به حرکت کرده و در مرحله بعد به نقطه 35px
پائینتر از مکان اصلی خود آمده و opacity نیم را خواهد داشت و در نهایت، با حرکت بعدی به جای اصلی خود خواهد
رفت و opacity
یک را پیدا میکند.
animations: [
trigger('flyInOut', [
transition('void => *', [
animate(300, keyframes([
style({opacity: 0, transform: 'translateY(-75%)', offset: 0}),
style({opacity: 0.5, transform: 'translateY(35px)', offset: 0.3}),
style({opacity: 1, transform: 'translateY(0)', offset: 1.0})
]))
])
])
]
تابع Keyframes آرایهای از تابع style را دریافت میکند که هر تابع شامل خصوصیتهای انیمیشن به همراه یه
خصوصیت offset
است. این خصوصیت اختیاری است و مقدار صفر تا یک را قبول میکند و بیانگر زمان
اجرای تابع style
بعدی است.
رخداد شروع و پایان انیمیشن
با استفاده از @triggerName.start و @triggerName.done با شروع و پایان انیمیشن خود میتوانید یک تابع سفارشی را نیز
اجرا کنید. برای مثال کد زیر را در نظر بگیرید:
template: `
<ul>
<li *ngFor="let hero of heroes"
(@flyInOut.start)="animationStarted($event)"
(@flyInOut.done)="animationDone($event)"
[@flyInOut]="'in'">
{{hero.name}}
</li>
</ul>
`,
در این مثال هنگام شروع انیمیشن تابع animationStarted و
پس از اتمام انیمیشن، تابع animationDone اجرا خواهند شد.