Skip to content

Commit f619412

Browse files
wnvkownvko
committed
chore(animations): add animations dev sample
1 parent 0778d81 commit f619412

File tree

7 files changed

+298
-1
lines changed

7 files changed

+298
-1
lines changed

‎src/app/app.component.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -516,6 +516,11 @@ export class AppComponent implements OnInit {
516516
].sort((componentLink1, componentLink2) => componentLink1.name > componentLink2.name ? 1 : -1);
517517

518518
styleLinks = [
519+
{
520+
link: '/animations',
521+
icon: 'color_lens',
522+
name: 'Animations'
523+
},
519524
{
520525
link: '/colors',
521526
icon: 'color_lens',

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,7 @@ import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-col
136136
import { IgxColumnGroupingDirective } from './grid-column-actions/custom-action-directive';
137137
import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
138138
import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
139+
import { AnimationsSampleComponent } from './styleguide/animations/animations.sample';
139140

140141
const components = [
141142
ActionStripSampleComponent,
@@ -228,6 +229,7 @@ const components = [
228229
TreeGridLoadOnDemandSampleComponent,
229230
CustomContentComponent,
230231
ColorsSampleComponent,
232+
AnimationsSampleComponent,
231233
ShadowsSampleComponent,
232234
TypographySampleComponent,
233235
RadioSampleComponent,

‎src/app/app.routing.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-
7979
import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample';
8080
import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
8181
import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
82+
import { AnimationsSampleComponent } from './styleguide/animations/animations.sample';
8283

8384
const appRoutes = [
8485
{
@@ -202,11 +203,14 @@ const appRoutes = [
202203
path: 'snackbar',
203204
component: SnackbarSampleComponent
204205
},
205-
206206
{
207207
path: 'colors',
208208
component: ColorsSampleComponent
209209
},
210+
{
211+
path: 'animations',
212+
component: AnimationsSampleComponent
213+
},
210214
{
211215
path: 'shadows',
212216
component: ShadowsSampleComponent

‎src/app/routing.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ import { GridNestedPropsSampleComponent } from './grid-nested-props/grid-nested-
112112
import { GridColumnActionsSampleComponent } from './grid-column-actions/grid-column-actions.sample';
113113
import { GridAddRowSampleComponent } from './grid-add-row/grid-add-row.sample';
114114
import { HierarchicalGridAddRowSampleComponent } from './hierarchical-grid-add-row/hierarchical-grid-add-row.sample';
115+
import { AnimationsSampleComponent } from './styleguide/animations/animations.sample';
115116

116117
const appRoutes = [
117118
{
@@ -291,6 +292,10 @@ const appRoutes = [
291292
path: 'colors',
292293
component: ColorsSampleComponent
293294
},
295+
{
296+
path: 'animations',
297+
component: AnimationsSampleComponent
298+
},
294299
{
295300
path: 'shadows',
296301
component: ShadowsSampleComponent

‎src/app/styleguide/animations/animations.sample.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<div class="sample-wrapper">
2+
<article class="sample-column">
3+
<h4 class="sample-title">Animations categories</h4>
4+
<div>
5+
<igx-list (onItemClicked)="categoryItemClicked($event)">
6+
<igx-list-item igxRipple *ngFor="let category of animationsCategories">
7+
<p>{{ category }}</p>
8+
</igx-list-item>
9+
</igx-list>
10+
</div>
11+
</article>
12+
<article class="sample-column">
13+
<h4 class="sample-title">Animations</h4>
14+
<div>
15+
<igx-list (onItemClicked)="playAnimation($event)">
16+
<igx-list-item igxRipple *ngFor="let animation of animations">
17+
<p>{{ animation.name }}</p>
18+
</igx-list-item>
19+
</igx-list>
20+
</div>
21+
</article>
22+
<igx-dialog #dialog>
23+
<h4>This is a sample dialog showing the selected animation</h4>
24+
<br>
25+
<hr>
26+
<br>
27+
<hr>
28+
<br>
29+
<hr>
30+
<br>
31+
<h4>Click outside the dialog to close it</h4>
32+
</igx-dialog>
33+
</div>

‎src/app/styleguide/animations/animations.sample.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.sample-wrapper {
2+
display: flex;
3+
}
4+
5+
.sample-title {
6+
margin-left: 8px;
7+
}

‎src/app/styleguide/animations/animations.sample.ts

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
import { AnimationReferenceMetadata } from '@angular/animations';
2+
import { Component, ViewChild } from '@angular/core';
3+
import {
4+
blink, fadeIn, fadeOut, flipBottom, flipHorBck, flipHorFwd, flipLeft, flipRight, flipTop,
5+
flipVerBck, flipVerFwd, growVerIn, growVerOut, heartbeat,
6+
IgxDialogComponent, IgxOverlayService, IListItemClickEventArgs,
7+
pulsateBck, pulsateFwd, rotateInBl,
8+
rotateInBottom, rotateInBr, rotateInCenter, rotateInDiagonal1, rotateInDiagonal2, rotateInHor,
9+
rotateInLeft, rotateInRight, rotateInTl, rotateInTop, rotateInTr, rotateInVer, rotateOutBl,
10+
rotateOutBottom, rotateOutBr, rotateOutCenter, rotateOutDiagonal1, rotateOutDiagonal2,
11+
rotateOutHor, rotateOutLeft, rotateOutRight, rotateOutTl, rotateOutTop, rotateOutTr,
12+
rotateOutVer, scaleInBl, scaleInBottom, scaleInBr, scaleInCenter, scaleInHorCenter,
13+
scaleInHorLeft, scaleInHorRight, scaleInLeft, scaleInRight, scaleInTl, scaleInTop, scaleInTr,
14+
scaleInVerBottom, scaleInVerCenter, scaleInVerTop, scaleOutBl, scaleOutBottom, scaleOutBr,
15+
scaleOutCenter, scaleOutHorCenter, scaleOutHorLeft, scaleOutHorRight, scaleOutLeft,
16+
scaleOutRight, scaleOutTl, scaleOutTop, scaleOutTr, scaleOutVerBottom, scaleOutVerCenter,
17+
scaleOutVerTop, shakeBl, shakeBottom, shakeBr, shakeCenter, shakeHor, shakeLeft, shakeRight,
18+
shakeTl, shakeTop, shakeTr, shakeVer, slideInBl, slideInBottom, slideInBr, slideInLeft,
19+
slideInRight, slideInTl, slideInTop, slideInTr, slideOutBl, slideOutBottom, slideOutBr,
20+
slideOutLeft, slideOutRight, slideOutTl, slideOutTop, slideOutTr, swingInBottomBck,
21+
swingInBottomFwd, swingInLeftBck, swingInLeftFwd, swingInRightBck, swingInRightFwd,
22+
swingInTopBck, swingInTopFwd, swingOutBottomBck, swingOutBottomFwd, swingOutLeftBck,
23+
swingOutLefttFwd, swingOutRightBck, swingOutRightFwd, swingOutTopBck, swingOutTopFwd
24+
} from 'igniteui-angular';
25+
import { AbsolutePosition } from 'projects/igniteui-angular/src/lib/services/overlay/utilities';
26+
27+
@Component({
28+
selector: 'app-animations-sample',
29+
styleUrls: ['animations.sample.scss'],
30+
templateUrl: 'animations.sample.html'
31+
})
32+
export class AnimationsSampleComponent {
33+
@ViewChild('dialog', { static: true, read: IgxDialogComponent })
34+
private dialog: IgxDialogComponent;
35+
36+
public animationsCategories: string[] = [
37+
'fade',
38+
'flip',
39+
'grow',
40+
'rotate',
41+
'scale',
42+
'slide',
43+
'swing',
44+
'shake',
45+
'pulsate'
46+
];
47+
48+
public animations: { name: string, animation: AnimationReferenceMetadata }[];
49+
50+
private fadeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
51+
{ name: 'fadeIn', animation: fadeIn },
52+
{ name: 'fadeOut', animation: fadeOut },
53+
];
54+
55+
private flipAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
56+
{ name: 'flipTop', animation: flipTop },
57+
{ name: 'flipRight', animation: flipRight },
58+
{ name: 'flipBottom', animation: flipBottom },
59+
{ name: 'flipLeft', animation: flipLeft },
60+
{ name: 'flipHorFwd', animation: flipHorFwd },
61+
{ name: 'flipHorBck', animation: flipHorBck },
62+
{ name: 'flipVerFwd', animation: flipVerFwd },
63+
{ name: 'flipVerBck', animation: flipVerBck }
64+
];
65+
66+
private growAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
67+
{ name: 'growVerIn', animation: growVerIn },
68+
{ name: 'growVerOut', animation: growVerOut },
69+
];
70+
71+
private rotateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
72+
{ name: 'rotateInCenter', animation: rotateInCenter },
73+
{ name: 'rotateInTop', animation: rotateInTop },
74+
{ name: 'rotateInRight', animation: rotateInRight },
75+
{ name: 'rotateInLeft', animation: rotateInLeft },
76+
{ name: 'rotateInBottom', animation: rotateInBottom },
77+
{ name: 'rotateInTr', animation: rotateInTr },
78+
{ name: 'rotateInBr', animation: rotateInBr },
79+
{ name: 'rotateInBl', animation: rotateInBl },
80+
{ name: 'rotateInTl', animation: rotateInTl },
81+
{ name: 'rotateInDiagonal1', animation: rotateInDiagonal1 },
82+
{ name: 'rotateInDiagonal2', animation: rotateInDiagonal2 },
83+
{ name: 'rotateInHor', animation: rotateInHor },
84+
{ name: 'rotateInVer', animation: rotateInVer },
85+
{ name: 'rotateOutCenter', animation: rotateOutCenter },
86+
{ name: 'rotateOutTop', animation: rotateOutTop },
87+
{ name: 'rotateOutRight', animation: rotateOutRight },
88+
{ name: 'rotateOutLeft', animation: rotateOutLeft },
89+
{ name: 'rotateOutBottom', animation: rotateOutBottom },
90+
{ name: 'rotateOutTr', animation: rotateOutTr },
91+
{ name: 'rotateOutBr', animation: rotateOutBr },
92+
{ name: 'rotateOutBl', animation: rotateOutBl },
93+
{ name: 'rotateOutTl', animation: rotateOutTl },
94+
{ name: 'rotateOutDiagonal1', animation: rotateOutDiagonal1 },
95+
{ name: 'rotateOutDiagonal2', animation: rotateOutDiagonal2 },
96+
{ name: 'rotateOutHor', animation: rotateOutHor },
97+
{ name: 'rotateOutVer', animation: rotateOutVer }
98+
];
99+
100+
private scaleAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
101+
{ name: 'scaleInTop', animation: scaleInTop },
102+
{ name: 'scaleInRight', animation: scaleInRight },
103+
{ name: 'scaleInBottom', animation: scaleInBottom },
104+
{ name: 'scaleInLeft', animation: scaleInLeft },
105+
{ name: 'scaleInCenter', animation: scaleInCenter },
106+
{ name: 'scaleInTr', animation: scaleInTr },
107+
{ name: 'scaleInBr', animation: scaleInBr },
108+
{ name: 'scaleInBl', animation: scaleInBl },
109+
{ name: 'scaleInTl', animation: scaleInTl },
110+
{ name: 'scaleInVerTop', animation: scaleInVerTop },
111+
{ name: 'scaleInVerBottom', animation: scaleInVerBottom },
112+
{ name: 'scaleInVerCenter', animation: scaleInVerCenter },
113+
{ name: 'scaleInHorCenter', animation: scaleInHorCenter },
114+
{ name: 'scaleInHorLeft', animation: scaleInHorLeft },
115+
{ name: 'scaleInHorRight', animation: scaleInHorRight },
116+
{ name: 'scaleOutTop', animation: scaleOutTop },
117+
{ name: 'scaleOutRight', animation: scaleOutRight },
118+
{ name: 'scaleOutBottom', animation: scaleOutBottom },
119+
{ name: 'scaleOutLeft', animation: scaleOutLeft },
120+
{ name: 'scaleOutCenter', animation: scaleOutCenter },
121+
{ name: 'scaleOutTr', animation: scaleOutTr },
122+
{ name: 'scaleOutBr', animation: scaleOutBr },
123+
{ name: 'scaleOutBl', animation: scaleOutBl },
124+
{ name: 'scaleOutTl', animation: scaleOutTl },
125+
{ name: 'scaleOutVerTop', animation: scaleOutVerTop },
126+
{ name: 'scaleOutVerBottom', animation: scaleOutVerBottom },
127+
{ name: 'scaleOutVerCenter', animation: scaleOutVerCenter },
128+
{ name: 'scaleOutHorCenter', animation: scaleOutHorCenter },
129+
{ name: 'scaleOutHorLeft', animation: scaleOutHorLeft },
130+
{ name: 'scaleOutHorRight', animation: scaleOutHorRight }
131+
];
132+
133+
private slideAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
134+
{ name: 'slideInTop', animation: slideInTop },
135+
{ name: 'slideInRight', animation: slideInRight },
136+
{ name: 'slideInBottom', animation: slideInBottom },
137+
{ name: 'slideInLeft', animation: slideInLeft },
138+
{ name: 'slideInTr', animation: slideInTr },
139+
{ name: 'slideInBr', animation: slideInBr },
140+
{ name: 'slideInBl', animation: slideInBl },
141+
{ name: 'slideInTl', animation: slideInTl },
142+
{ name: 'slideOutTop', animation: slideOutTop },
143+
{ name: 'slideOutBottom', animation: slideOutBottom },
144+
{ name: 'slideOutRight', animation: slideOutRight },
145+
{ name: 'slideOutLeft', animation: slideOutLeft },
146+
{ name: 'slideOutTr', animation: slideOutTr },
147+
{ name: 'slideOutBr', animation: slideOutBr },
148+
{ name: 'slideOutBl', animation: slideOutBl },
149+
{ name: 'slideOutTl', animation: slideOutTl }
150+
];
151+
152+
private swingAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
153+
{ name: 'swingInTopFwd', animation: swingInTopFwd },
154+
{ name: 'swingInRightFwd', animation: swingInRightFwd },
155+
{ name: 'swingInLeftFwd', animation: swingInLeftFwd },
156+
{ name: 'swingInBottomFwd', animation: swingInBottomFwd },
157+
{ name: 'swingInTopBck', animation: swingInTopBck },
158+
{ name: 'swingInRightBck', animation: swingInRightBck },
159+
{ name: 'swingInBottomBck', animation: swingInBottomBck },
160+
{ name: 'swingInLeftBck', animation: swingInLeftBck },
161+
{ name: 'swingOutTopFwd', animation: swingOutTopFwd },
162+
{ name: 'swingOutRightFwd', animation: swingOutRightFwd },
163+
{ name: 'swingOutBottomFwd', animation: swingOutBottomFwd },
164+
{ name: 'swingOutLefttFwd', animation: swingOutLefttFwd },
165+
{ name: 'swingOutTopBck', animation: swingOutTopBck },
166+
{ name: 'swingOutRightBck', animation: swingOutRightBck },
167+
{ name: 'swingOutBottomBck', animation: swingOutBottomBck },
168+
{ name: 'swingOutLeftBck', animation: swingOutLeftBck }
169+
];
170+
171+
private shakeAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
172+
{ name: 'shakeHor', animation: shakeHor },
173+
{ name: 'shakeVer', animation: shakeVer },
174+
{ name: 'shakeTop', animation: shakeTop },
175+
{ name: 'shakeBottom', animation: shakeBottom },
176+
{ name: 'shakeRight', animation: shakeRight },
177+
{ name: 'shakeLeft', animation: shakeLeft },
178+
{ name: 'shakeCenter', animation: shakeCenter },
179+
{ name: 'shakeTr', animation: shakeTr },
180+
{ name: 'shakeBr', animation: shakeBr },
181+
{ name: 'shakeBl', animation: shakeBl },
182+
{ name: 'shakeTl', animation: shakeTl }
183+
];
184+
185+
private pulsateAnimations: { name: string, animation: AnimationReferenceMetadata }[] = [
186+
{ name: 'heartbeat', animation: heartbeat },
187+
{ name: 'pulsateFwd', animation: pulsateFwd },
188+
{ name: 'pulsateBck', animation: pulsateBck },
189+
{ name: 'blink', animation: blink }
190+
];
191+
192+
constructor() {
193+
this.animations = this.fadeAnimations;
194+
}
195+
196+
public categoryItemClicked(e: IListItemClickEventArgs): void {
197+
const category = this.animationsCategories[e.item.index];
198+
switch (category) {
199+
case 'fade':
200+
this.animations = this.fadeAnimations;
201+
break;
202+
case 'flip':
203+
this.animations = this.flipAnimations;
204+
break;
205+
case 'grow':
206+
this.animations = this.growAnimations;
207+
break;
208+
case 'rotate':
209+
this.animations = this.rotateAnimations;
210+
break;
211+
case 'scale':
212+
this.animations = this.scaleAnimations;
213+
break;
214+
case 'slide':
215+
this.animations = this.slideAnimations;
216+
break;
217+
case 'swing':
218+
this.animations = this.swingAnimations;
219+
break;
220+
case 'shake':
221+
this.animations = this.shakeAnimations;
222+
break;
223+
case 'pulsate':
224+
this.animations = this.pulsateAnimations;
225+
break;
226+
}
227+
}
228+
229+
public playAnimation(e: IListItemClickEventArgs): void {
230+
const animation = this.animations[e.item.index].animation;
231+
if (animation.options?.params?.duration && animation.options?.params?.duration !== '1000ms') {
232+
animation.options.params.duration = '1000ms';
233+
}
234+
const overlaySettings = IgxOverlayService.createAbsoluteOverlaySettings(AbsolutePosition.Center);
235+
overlaySettings.closeOnOutsideClick = true;
236+
overlaySettings.modal = true;
237+
overlaySettings.positionStrategy.settings.openAnimation = animation;
238+
overlaySettings.positionStrategy.settings.closeAnimation = null;
239+
this.dialog.open(overlaySettings);
240+
}
241+
}

0 commit comments

Comments
 (0)