<\/div>\n

Merhaba,<\/p>\n

Bu i\u00e7eri\u011fimizde, Angular mimarisi e\u015fli\u011finde yap\u0131lm\u0131\u015f bir uygulamay\u0131 g\u00f6rsel olarak s\u00fcsleyebilmemiz i\u00e7in geli\u015ftirilmi\u015f animasyon yap\u0131lanmas\u0131n\u0131 inceleyecek, nesnesel animasyonlarla ve componentler aras\u0131 ge\u00e7i\u015f efektleriyle konumuzu \u00f6rneklendirerek ad\u0131m ad\u0131m derinlemesine irdeleyece\u011fiz.<\/p>\n

Giri\u015f<\/h3>\n
\u00d6ncelikle “animasyon” kelimesinin fiili boyutunu izah ederek konumuza ba\u015flayal\u0131m. Animasyon; bir nesnenin\/yap\u0131n\u0131n ilk durumdaki halinden son durumdaki haline ge\u00e7i\u015f s\u00fcreci olarak ifade edebiliriz. Bu s\u00fcre\u00e7teki etkile\u015fim insan\u0131n g\u00f6z\u00fcne ho\u015f bir g\u00f6r\u00fcnt\u00fc vermekle birlikte zihninde ilgi \u00e7ekici bir izlenim b\u0131rakmakta ve o anki ilgilenilen olgu her ne ise e\u011flenceli hale getirmektedir.<\/p>\n
Animasyonlar, g\u00fcn\u00fcm\u00fcz modern web uygulamalar\u0131n\u0131n ayr\u0131lmaz birer par\u00e7alar\u0131 olmu\u015flard\u0131r. Son kullan\u0131c\u0131n\u0131n yapm\u0131\u015f oldu\u011fu bir etkile\u015fim neticesinde uygulama reaksiyona animasyonlar e\u015fli\u011finde girdi\u011fi taktirde ilgili kullan\u0131c\u0131n\u0131n hem uygulamaya olan sempatisini artt\u0131racakt\u0131r hem de yap\u0131sal olarak uygulaman\u0131n kalitesini ortaya koyacakt\u0131r.<\/p>\n

Ba\u015flarken<\/h3>\n

Bu i\u00e7eri\u011fimizde Angular uygulamalar\u0131nda animasyon \u00e7al\u0131\u015fmalar\u0131n\u0131n nas\u0131l yap\u0131ld\u0131\u011f\u0131n\u0131 inceleyece\u011fimizden dolay\u0131 pratik a\u011f\u0131rl\u0131kl\u0131 bir seyir halinde olaca\u011f\u0131z. Dolay\u0131s\u0131yla makaleye e\u015flik edebilmeniz i\u00e7in haz\u0131rbulunu\u015fluluk a\u00e7\u0131s\u0131ndan ilk olarak i\u00e7erisinde a\u015fa\u011f\u0131daki yap\u0131lar\u0131 ve config\u00fcrasyonu bar\u0131nd\u0131ran bo\u015f bir Angular projesi olu\u015fturunuz;<\/p>\n

“Home”, “About” ve “Contact” isimlerinde \u00fc\u00e7 adet component olu\u015fturunuz,<\/li>\n

@angular\/platform-browser\/animations<\/em> k\u00fct\u00fcphanesindeki BrowserAnimationsModule<\/em> mod\u00fcl\u00fcn\u00fc uygulaman\u0131n ana mod\u00fcl\u00fcne import ediniz;\n
\r\nimport { BrowserModule } from '@angular\/platform-browser';\r\nimport { NgModule } from '@angular\/core';\r\nimport { AppRoutingModule } from '.\/app-routing.module';\r\nimport { AppComponent } from '.\/app.component';\r\nimport { HomeComponent } from '.\/home\/home.component';\r\nimport { AboutComponent } from '.\/about\/about.component';\r\nimport { ContactComponent } from '.\/contact\/contact.component';\r\nimport { BrowserAnimationsModule } from "@angular\/platform-browser\/animations";\r\n@NgModule({\r\n declarations: [\r\n AppComponent,\r\n HomeComponent,\r\n AboutComponent,\r\n ContactComponent\r\n ],\r\n imports: [\r\n BrowserModule,\r\n AppRoutingModule,\r\n BrowserAnimationsModule\r\n ],\r\n providers: [],\r\n bootstrap: [AppComponent]\r\n})\r\nexport class AppModule { }\r\n<\/pre>\n<\/li>\n<\/ul>\n
Evet… Art\u0131k haz\u0131r\u0131z…<\/p>\n
Animasyon Ge\u00e7i\u015f Zamanlamas\u0131<\/h3>\n
Yukar\u0131daki sat\u0131rlarda “Giri\u015f” paragraf\u0131nda Animasyon fiiliyat\u0131n\u0131n izahatini yapm\u0131\u015f ve “bir nesnenin\/yap\u0131n\u0131n ilk durumdaki halinden son durumdaki haline ge\u00e7i\u015f s\u00fcreci olarak ifade edebiliriz<\/em>” \u015feklinde tan\u0131mlam\u0131\u015ft\u0131k.<\/p>\n
\u0130\u015fte bu -ilk halden- -son hale- ge\u00e7i\u015f s\u00fcrecinde animasyon ge\u00e7i\u015f zamanlamas\u0131 temel konfig\u00fcrasyonu sa\u011flamaktat\u0131r. Angular animasyon ge\u00e7i\u015fi i\u00e7in a\u015fa\u011f\u0131daki \u00fc\u00e7 farkl\u0131 zamanlama \u00f6zelli\u011fini sunmaktad\u0131r;<\/p>\n
\n
Duration(S\u00fcre<\/em>)<\/strong>
\nBu \u00f6zellik, animasyonun -ilk halden- -son hale- kadar gelece\u011fi zaman\u0131 ifade eder. A\u015fa\u011f\u0131daki gibi \u00fc\u00e7 farkl\u0131 yolla tan\u0131mlayabiliriz;<\/p>\n
\n
Milisaniye cinsinden s\u00fcreyi temsil eden bir tamsay\u0131 de\u011feri kullanma. \u00d6rne\u011fin; 500<\/li>\n
Milisaniye cinsinden s\u00fcreyi temsil etmek i\u00e7in bir dize de\u011feri kullanma. \u00d6rne\u011fin; ‘500ms’<\/li>\n
S\u00fcreyi saniye cinsinden g\u00f6stermek i\u00e7in bir dize de\u011feri kullanma. \u00d6rne\u011fin; ‘0.5s’<\/li>\n<\/ul>\n<\/li>\n
Delay(Gecikme<\/em>)<\/strong>
\nBu \u00f6zellik, tetiklenen animasyon an\u0131 ile ger\u00e7ek ge\u00e7i\u015fin ba\u015flamas\u0131 aras\u0131ndaki s\u00fcreyi temsil eder. A\u015fa\u011f\u0131daki gibi tan\u0131mlanabilir;<\/p>\n
\n
‘0.3s 500ms’ : Bu ifade, animasyon tetiklendi\u011fi andan itibaren 500 milisaniye bekleyece\u011fi ve daha sonra ger\u00e7ek ge\u00e7i\u015fin ba\u015flamas\u0131yla birlikte animasyonun 0.3 saniye s\u00fcrece\u011fi anlam\u0131na gelir.<\/li>\n
’10s 3000ms’ : Animasyon 3000 milisaniye bekleyecek, ard\u0131ndan 10 saniye ge\u00e7i\u015f s\u00fcrecektir.<\/li>\n<\/ul>\n<\/li>\n
Easing(Hareket H\u0131z\u0131<\/em>)<\/strong>
\nBu \u00f6zellik ise animasyonun ger\u00e7ekle\u015fmesi esnas\u0131nda nas\u0131l h\u0131zlan\u0131p yava\u015flayaca\u011f\u0131n\u0131 ifade eder.
\nA\u015fa\u011f\u0131daki gibi tan\u0131mlanabilir;<\/p>\n
\n
‘0.3s 500ms ease-in’<\/li>\n
‘0.3s 3000ms ease-out’<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
Temel Animasyon Fonksiyonlar\u0131<\/h3>\n
Bir nesneye yahut componentler aras\u0131 ge\u00e7i\u015fe animasyon uygulayabilmek i\u00e7in @angular\/animations<\/em> mod\u00fcl\u00fc alt\u0131ndaki fonksiyonlar\u0131 kullanmaktay\u0131z. \u015eimdi gelin teorik olarak bu fonksiyonlar\u0131 inceleyelim;<\/p>\n
\n
trigger<\/strong>
\nUygulama i\u00e7in tasarlanm\u0131\u015f t\u00fcm animasyonlar esas\u0131nda birer etikete sahiptirler. \u00c7al\u0131\u015fma zaman\u0131nda hangi animasyon tetikleniyorsa ilgili animasyona \u00f6zel bir trigger f\u0131rlat\u0131lmakta ve s\u00fcre\u00e7 ba\u015flat\u0131lmaktad\u0131r.<\/p>\n
\u00d6rnek 1.0;<\/em><\/strong>
\n“MesajGoster” animasyonu ba\u015flat\u0131ld\u0131<\/em><\/strong>\n<\/li>\n
state<\/strong>
\nAnimasyonun alaca\u011f\u0131 aksiyonun de\u011ferini kontrol eden fonksiyondur.
\n\u00d6rnek 1.1;<\/em><\/strong>
\nState de\u011ferleri “a\u00e7”\/”kapat”<\/em><\/strong>\n<\/li>\n
style<\/strong>
\nstate fonksiyonu sayesinde yakalanan de\u011ferler e\u015fli\u011finde, hangi de\u011ferde hangi stillerin uygulanaca\u011f\u0131n\u0131 vs. yani t\u00fcm transform ayarlar\u0131n\u0131 style fonksiyonu sayesinde belirtmekteyiz.
\n\u00d6rnek 1.2;<\/em><\/strong>
\n“a\u00e7” isimli state de\u011ferinin style yap\u0131lanmas\u0131 \u015f\u00f6yle;<\/p>\n
\n
Arkaplan rengi mavi<\/li>\n
Yaz\u0131lar turuncu<\/li>\n
Yaz\u0131 boyutlar\u0131 17px vs.<\/li>\n<\/ul>\n
“kapat” isimli state de\u011ferinin style yap\u0131lanmas\u0131 ise \u015f\u00f6yle;<\/p>\n
\n
Arkaplan rengi kahverengi<\/li>\n
Yaz\u0131lar gri<\/li>\n
Yaz\u0131 boyutlar\u0131 13px vs.<\/li>\n<\/ul>\n
<\/em><\/strong>\n<\/li>\n
transition<\/strong>
\nstate de\u011ferlerine \u00f6zel tan\u0131mlanm\u0131\u015f style’lar aras\u0131nda ge\u00e7i\u015fi sa\u011flamak i\u00e7in kullan\u0131lan fonksiyondur.
\n\u00d6rnek 1.3;<\/em><\/strong>
\nGelen state de\u011feri “a\u00e7” ise; “kapat => a\u00e7” de\u011fil ise “a\u00e7 => kapat” olacak \u015fekilde ge\u00e7i\u015f yap.<\/em><\/strong>\n<\/li>\n
animate<\/strong>
\ntransition fonksiyonuyla yap\u0131lacak olan ge\u00e7i\u015fin belirtilen ge\u00e7i\u015f zamanlamas\u0131 zarf\u0131nda ger\u00e7ekle\u015fmesini sa\u011flayan fonksiyondur. Yani animasyon harekat\u0131n\u0131 ba\u015flatan fonksiyondur.
\n\u00d6rnek 1.4;<\/em><\/strong>
\nAnimasyonu 1500 milisaniye i\u00e7erisinde ger\u00e7ekle\u015ftir.<\/em><\/strong>\n<\/li>\n
query<\/strong>
\nComponentler aras\u0131 ge\u00e7i\u015f animasyonlar\u0131nda componente giri\u015f yahut \u00e7\u0131k\u0131\u015f durumlar\u0131nda beklenen style yap\u0131land\u0131rmas\u0131n\u0131 sa\u011flamak i\u00e7in kullan\u0131lan fonksiyondur. transition fonksiyonu i\u00e7erisinde parametre olarak kullan\u0131l\u0131r.\n<\/li>\n
group<\/strong>
\n\u0130\u00e7erisinde birden fazla query olacak olan transition fonksiyonunda bu queryleri group fonksiyonu arac\u0131l\u0131\u011f\u0131yla tek bir dizi \u015feklinde tan\u0131mlay\u0131p, tutabiliriz.\n<\/li>\n<\/ul>\n
Animasyon Olu\u015fturma<\/h3>\n
Olu\u015fturulan animasyonlar ilgili componentin “@Component” deklarasyonu i\u00e7erisindeki “animations” dizisinde trigger fonksiyonlar\u0131 olarak tutulacakt\u0131r. Tabi bunun i\u00e7in \u00f6ncelikle animasyon uygulanacak yap\u0131ya yahut nesneye a\u015fa\u011f\u0131daki gibi bir etiket tan\u0131mlamas\u0131 yapmam\u0131z gerekmektedir.
\n $\"Angular$ <\/a>
\nAnimasyon tetiklendi\u011fi vakit, tan\u0131mlanan bu etiket ad\u0131na uygun trigger devreye girecek ve varsa tan\u0131mlanm\u0131\u015f olan de\u011fi\u015fken de\u011ferini state olarak bizlere iletecektir.<\/p>\n
\u015eimdi bunu bir ka\u00e7 \u00f6rnekle inceleyece\u011fiz. \u0130\u00e7eri\u011fimizde pratiksel anlat\u0131m sergileyebilmek i\u00e7in yapaca\u011f\u0131m\u0131z nesnesel animasyon \u00f6rneklendirmeleri \u00f6nceden olu\u015fturdu\u011fumuz(‘ba\u015flarken’ ba\u015fl\u0131\u011f\u0131 alt\u0131nda de\u011finmi\u015ftim<\/span>) “HomeComponent” alt\u0131nda ger\u00e7ekle\u015ftirece\u011fiz. Bunun haricinde componentler aras\u0131 animasyonel ge\u00e7i\u015flerde ise \u00f6rneklendirmek maksad\u0131yla mevcutta bulunan t\u00fcm componentleri kullanaca\u011f\u0131z.<\/p>\n
\u00d6rnek 1<\/h4>\n
Bu \u00f6rne\u011fimizde bir div nesnesinin boyutunu animasyonel olarak de\u011fi\u015ftirece\u011fiz.<\/p>\n
\r\n<button type="button" class="btn btn-primary" (click)="boyutDegistir()">Boyut De\u011fi\u015ftir<\/button>\r\n<div [@boyut]="boyutDurumu"><\/div>\r\n<\/pre>\n
\r\nimport { Component } from '@angular\/core';\r\nimport { trigger, state, style, transition, animate } from "@angular\/animations";\r\n\r\n@Component({\r\n templateUrl: '.\/home.component.html',\r\n animations: [\r\n trigger("boyut", [\r\n state("0", style({\r\n backgroundColor: "yellow",\r\n width: "100px",\r\n height: "100px"\r\n })),\r\n state("1", style({\r\n backgroundColor: "green",\r\n width: "300px",\r\n height: "300px"\r\n })),\r\n transition("0 => 1", animate("500ms")),\r\n transition("1 => 0", animate("500ms")),\r\n ])\r\n ]\r\n})\r\nexport class HomeComponent {\r\n boyutDurumu = 0;\r\n boyutDegistir() {\r\n this.boyutDurumu = this.boyutDurumu === 0 ? 1 : 0;\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131daki yap\u0131lanmay\u0131 incelerseniz e\u011fer “@boyut” etiketine sahip olan div nesnesi “boyutDurumu” isimli de\u011fer \u00fczerinden animasyonel bir aksiyon ger\u00e7ekle\u015ftirmektedir. Butona t\u0131kland\u0131\u011f\u0131 vakit “boyutDegistir” isimli fonksiyon tetiklenecektir ve i\u00e7erisinde “boyutDurumu” isimli de\u011fi\u015fkenin de\u011feri de\u011fi\u015ftirilecektir. \u0130\u015fte bu durumda “boyutDurumu” de\u011feri de\u011fi\u015fti\u011finden dolay\u0131 “@boyut” etiketine sahip olan trigger devreye girecek ve state de\u011ferine g\u00f6re gerekli transition i\u015flemini “500ms” i\u00e7erisinde ger\u00e7ekle\u015ftirecektir.<\/p>\n
$\"Angular$ <\/a><\/p>\n
\u00d6rnek 2<\/h4>\n
Bu \u00f6rnekte ise bir veri k\u00fcmesine animasyonel bir \u015fekilde veri ekleyip, silece\u011fiz.<\/p>\n
\r\n<button type="button" class="btn btn-primary" (click)="elemanEkle()">Eleman Ekle<\/button><button type="button"\r\n class="btn btn-danger m-1" (click)="elemanSil()">Eleman Sil<\/button>\r\n\r\n<ul>\r\n <li [@elemanEkle] *ngFor="let eleman of elemanListesi">Eleman {{eleman}}<\/li>\r\n<\/ul>\r\n<\/pre>\n
\r\nimport { Component } from '@angular\/core';\r\nimport { trigger, state, style, transition, animate } from "@angular\/animations";\r\n\r\n@Component({\r\n templateUrl: '.\/home.component.html',\r\n animations: [\r\n trigger("elemanEkle", [\r\n state("void", style({\r\n opacity: 0\r\n })),\r\n transition("void <=> *", animate(1000))\r\n ])\r\n ]\r\n})\r\nexport class HomeComponent {\r\n elemanListesi: number[] = [];\r\n sayac: number = 0;\r\n elemanEkle() {\r\n this.elemanListesi.push(++this.sayac);\r\n }\r\n elemanSil() {\r\n this.elemanListesi.length -= 1;\r\n }\r\n}\r\n<\/pre>\n
Yukar\u0131daki yap\u0131lanmada ise “elemanListesi” isimli veri kayna\u011f\u0131na veri eklenmekte ve silinmektedir. T\u00fcm bu i\u015flem ger\u00e7ekle\u015ftirilirken “@elemanEkle” etiket de\u011ferine sahip li nesnesi, herhangi bir de\u011fi\u015fken ba\u011flant\u0131s\u0131 s\u00f6z konusu olmad\u0131\u011f\u0131ndan dolay\u0131 state de\u011feri void olarak tarif edilmektedir ve “void <=> *” komutu e\u015fli\u011finde animasyonu devreye sokmaktad\u0131r. <\/p>\n
Burada DOM’un bir par\u00e7as\u0131 olmayan ve \u00e7al\u0131\u015fma zaman\u0131nda listeye eklenen \u00f6\u011fenin state’ini void ile kar\u015f\u0131lamaktay\u0131z. Bunun nedeni; e\u011fer ki DOM’a yerle\u015ftirilmeyen bir \u00f6\u011fe olu\u015fturursan\u0131z veyahut DOM’da olmayan bir \u00f6\u011feyi kald\u0131r\u0131rsan\u0131z bu durumun state’i void olarak temsil edilecektir. Dolay\u0131s\u0131yla DOM’da olmayan bir \u00f6\u011fe eklenirken veya kald\u0131r\u0131l\u0131rken animasyon olu\u015fturmak i\u00e7in kulland\u0131\u011f\u0131m\u0131z state de\u011ferimiz void ile ifade edilir.<\/p>\n
Ayriyetten t\u00fcm tetiklenme durumlar\u0131na istinaden, \u00e7ift y\u00f6nl\u00fc bir etkile\u015fimin s\u00f6z konusu oldu\u011fu durumlarda “<=>” ifadesini ve bununla birlikte t\u00fcm\u00fcn\u00fc ifade eden “*” karakterini kullanmaktay\u0131z.
\n $\"Angular$ <\/a><\/p>\n
\u00d6rnek 3<\/h4>\n
Yine benzer \u015fekilde veri k\u00fcmesine farkl\u0131 tonda animasyonel i\u015flem ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n
\r\n<button type="button" class="btn btn-primary" (click)="elemanEkle()">Eleman Ekle<\/button><button type="button"\r\n class="btn btn-danger m-1" (click)="elemanSil()">Eleman Sil<\/button>\r\n\r\n<ul>\r\n <li [@ucarakElemanEkle]="'ucarakEkle'" *ngFor="let eleman of elemanListesi">Eleman {{eleman}}<\/li>\r\n<\/ul>\r\n<\/pre>\n
\r\nimport { Component } from '@angular\/core';\r\nimport { trigger, state, style, transition, animate } from "@angular\/animations";\r\n\r\n@Component({\r\n templateUrl: '.\/home.component.html',\r\n animations: [\r\n trigger("ucarakElemanEkle", [\r\n state("ucarakEkle", style({ transform: "translateX(0)" })),\r\n transition(":enter", [\r\n style({ transform: 'translateX(-100%)' }),\r\n animate("500ms")\r\n ]),\r\n transition(':leave', [\r\n animate(1000, style({ transform: 'translateX(100%)' }))\r\n ])\r\n ])\r\n ]\r\n})\r\nexport class HomeComponent {\r\n elemanListesi: number[] = [];\r\n sayac: number = 0;\r\n durum = 0;\r\n elemanEkle() {\r\n this.elemanListesi.push(++this.sayac);\r\n }\r\n elemanSil() {\r\n this.elemanListesi.length -= 1;\r\n }\r\n}\r\n<\/pre>\n
$\"Angular$ <\/a><\/p>\n
\u00d6rnek 4<\/h4>\n
Ve son olarak componentler aras\u0131 ge\u00e7i\u015fler i\u00e7in bir animasyon olu\u015ftural\u0131m. Tabi bu i\u015flem di\u011fer \u00f6rneklerdekine nazaran biraz daha u\u011fra\u015f gerektirece\u011finden dolay\u0131 ad\u0131m ad\u0131m ilerleyelim;<\/p>\n
\n
\nAd\u0131m 1<\/strong>
\n\u0130lk olarak componente \u00f6zel ge\u00e7i\u015f animasyonu kazand\u0131rabilmek i\u00e7in route yap\u0131lanmas\u0131n\u0131 a\u015fa\u011f\u0131dai gibi in\u015fa etmeliyiz.<\/p>\n
\r\nconst routes: Routes = [\r\n { path: "", redirectTo: "\/home", pathMatch: "full" },\r\n { path: "home", component: HomeComponent, data: { animation: "home" } },\r\n { path: "about", component: AboutComponent, data: { animation: "about" } },\r\n { path: "contact", component: ContactComponent, data: { animation: "contact" } }\r\n];\r\n<\/pre>\n<\/li>\n
\nAd\u0131m 2<\/strong>
\nArd\u0131ndan componentler aras\u0131 y\u00f6nlendirme neticesinde ilgili componentin html’inin bas\u0131ld\u0131\u011f\u0131 yer olan router-outlet<\/em> keyword\u00fcn\u00fcn \u00fczerinde a\u015fa\u011f\u0131daki gibi i\u015flem yap\u0131lmas\u0131 yeterlidir.(router-outlet, \u00f6rnek projemizde AppComponent i\u00e7erisinde tan\u0131mlanm\u0131\u015ft\u0131r<\/span>)<\/p>\n
\r\n.\r\n.\r\n.\r\n<div [@routeAnimations]="o && o.activatedRouteData && o.activatedRouteData['animation']">\r\n <router-outlet #o="outlet"><\/router-outlet>\r\n<\/div>\r\n.\r\n.\r\n.\r\n<\/pre>\n<\/li>\n
\nAd\u0131m 3<\/strong>
\nComponent bazl\u0131 animasyonlar\u0131m\u0131z\u0131 tek tek olu\u015fturmal\u0131y\u0131z.<\/p>\n
\r\nimport { Component } from '@angular\/core';\r\nimport { transition, group, style, animate, query, trigger } from '@angular\/animations';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: '.\/app.component.html',\r\n styleUrls: ['.\/app.component.css'],\r\n animations: [\r\n trigger('routeAnimations', [\r\n transition('home => *', [\r\n query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),\r\n group([\r\n query(':enter', [\r\n style({ transform: 'translateX(100%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r\n ], { optional: true }),\r\n query(':leave', [\r\n style({ transform: 'translateX(0%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))\r\n ], { optional: true }),\r\n ])\r\n ]),\r\n transition('contact => *', [\r\n query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),\r\n group([\r\n query(':enter', [\r\n style({ transform: 'translateX(-100%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r\n ], { optional: true }),\r\n query(':leave', [\r\n style({ transform: 'translateX(0%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))\r\n ], { optional: true }),\r\n ])\r\n ]),\r\n transition('about => contact', [\r\n query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),\r\n group([\r\n query(':enter', [\r\n style({ transform: 'translateX(100%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r\n ], { optional: true }),\r\n query(':leave', [\r\n style({ transform: 'translateX(0%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))\r\n ], { optional: true }),\r\n ])\r\n ]),\r\n transition('about => home', [\r\n query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),\r\n group([\r\n query(':enter', [\r\n style({ transform: 'translateX(-100%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))\r\n ], { optional: true }),\r\n query(':leave', [\r\n style({ transform: 'translateX(0%)' }),\r\n animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))\r\n ], { optional: true }),\r\n ])\r\n ]),\r\n ])\r\n ]\r\n})\r\nexport class AppComponent { }\r\n<\/pre>\n
\u015e\u00f6yle bi yukar\u0131daki t\u00fcm transition tan\u0131malamalar\u0131na g\u00f6z atarsak e\u011fer sayfa tasar\u0131s\u0131na uygun bir \u015fekilde animasyon yap\u0131lanmas\u0131n\u0131n sa\u011fland\u0131\u011f\u0131n\u0131 d\u00fc\u015f\u00fcnebilirsiniz. Nihayetinde “Home” | “About” | “Contact” \u015feklinde bir s\u0131ralama ile routelar\u0131 yerle\u015ftirdi\u011fimizi d\u00fc\u015f\u00fcn\u00fcrsek son kullan\u0131c\u0131n\u0131n yapm\u0131\u015f oldu\u011fu y\u00f6nlendirme isteklerini bu s\u0131ralamaya uygun bir \u015fekilde animasyonel olarak kar\u015f\u0131lamaktay\u0131z.<\/p>\n
10. sat\u0131rda; “home => *” direktifini belirterek “home” routeundan olacak t\u00fcm \u00e7\u0131k\u0131\u015flar\u0131 sola kayacak giri\u015fleri ise sa\u011fa kayacak \u015fekilde, 23. sat\u0131rda; “contact => *” ifadesi ile “contact” routeundan olacak t\u00fcm \u00e7\u0131k\u0131\u015flar\u0131 sa\u011fa giri\u015fleri ise sola kayacak \u015fekilde ve 36 ile 49. sat\u0131rlarda tan\u0131mlanan “about => contact” ve “about => home” ifadeleri ilede “about” routeuna olan t\u00fcm giri\u015flerin ve \u00e7\u0131k\u0131\u015flar\u0131n y\u00f6n\u00fcne g\u00f6re ya sa\u011fa ya da sola do\u011fru bir ge\u00e7i\u015f olacak \u015fekilde animasyonlar ger\u00e7ekle\u015ftirilmi\u015ftir.\n<\/li>\n<\/ul>\n
$\"Angular$ <\/a><\/p>\n
Bu sat\u0131rlar\u0131n akabinde art\u0131k Angular uygulamalar\u0131n\u0131zda kaliteli animasyonlar e\u015fli\u011finde kullan\u0131c\u0131lar\u0131n\u0131z\u0131 kar\u015f\u0131layabilir ve onlara daha canl\u0131 hizmet sa\u011flayabilirsiniz.<\/p>\n
\u00d6rnek projeyi indirmek i\u00e7in buraya<\/a> t\u0131klay\u0131n\u0131z.<\/p>\n
\u0130lgilenenlerin faydalanmas\u0131 dile\u011fiyle…
\nSonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar.<\/p>\n","protected":false},"excerpt":{"rendered":"
Merhaba, Bu i\u00e7eri\u011fimizde, Angular mimarisi e\u015fli\u011finde yap\u0131lm\u0131\u015f bir uygulamay\u0131 g\u00f6rsel olarak s\u00fcsleyebilmemiz i\u00e7in geli\u015ftirilmi\u015f animasyon yap\u0131lanmas\u0131n\u0131 inceleyecek, nesnesel animasyonlarla ve componentler aras\u0131 ge\u00e7i\u015f efektleriyle konumuzu \u00f6rneklendirerek ad\u0131m ad\u0131m derinlemesine irdeleyece\u011fiz. Giri\u015f \u00d6ncelikle “animasyon” kelimesinin...<\/p>\n","protected":false},"author":1,"featured_media":10506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2756],"tags":[2880,2882,2883,2884,2881,2886,2885,2887,2879,2888,1292,2889],"class_list":["post-11154","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-7","tag-angular-6-7","tag-angular-7-animasyon","tag-angular-animasyon-islemleri","tag-angular-animations","tag-animasyon-islemleri","tag-animation-delay","tag-animation-duration","tag-animation-easing","tag-browseranimationsmodule","tag-delay","tag-duration","tag-easing"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/11154","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=11154"}],"version-history":[{"count":69,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/11154\/revisions"}],"predecessor-version":[{"id":11231,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/11154\/revisions\/11231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/10506"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=11154"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=11154"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=11154"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}