chore(demo): add animation (#10153)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Jan 13, 2025 · b4d691c · b4d691c
1 parent 0b2f001
commit b4d691c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/projects/core/utils/miscellaneous/to-animation-options.ts b/projects/core/utils/miscellaneous/to-animation-options.ts
@@ -1,8 +1,13 @@
 import type {AnimationOptions} from '@angular/animations';
+import {inject} from '@angular/core';
+import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
 
 export const TUI_ANIMATIONS_DEFAULT_DURATION = 300;
 
-export function tuiToAnimationOptions(speed: number, easing?: string): AnimationOptions {
+export function tuiToAnimationOptions(
+    speed: number = inject(TUI_ANIMATIONS_SPEED),
+    easing?: string,
+): AnimationOptions {
     return {
         value: '',
         params: {

diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.html b/projects/demo/src/modules/components/card-large/examples/14/index.html
@@ -10,6 +10,8 @@
     tuiAppearance="floating"
     tuiCardLarge="compact"
     class="popover"
+    [@tuiFadeIn]="animation"
+    [@tuiSlideIn]="animation"
 >
     <ng-container *ngIf="step() === 1">
         <h1 tuiTitle>

diff --git a/projects/demo/src/modules/components/card-large/examples/14/index.ts b/projects/demo/src/modules/components/card-large/examples/14/index.ts
@@ -4,7 +4,15 @@ import {FormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAutoFocus} from '@taiga-ui/cdk';
-import {TuiAppearance, TuiButton, TuiPopup, TuiTitle} from '@taiga-ui/core';
+import {
+    TuiAppearance,
+    TuiButton,
+    tuiFadeIn,
+    TuiPopup,
+    tuiSlideIn,
+    TuiTitle,
+    tuiToAnimationOptions,
+} from '@taiga-ui/core';
 import {TuiRating} from '@taiga-ui/kit';
 import {TuiCardLarge} from '@taiga-ui/layout';
 import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy';
@@ -28,8 +36,10 @@ import {TuiTextareaModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'
     styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
+    animations: [tuiFadeIn, tuiSlideIn],
 })
 export default class Example {
+    protected readonly animation = {...tuiToAnimationOptions(), value: 'right'};
     protected readonly step = signal(0);
     protected rating = 0;
     protected comment = '';