Applying Animation to the Window Component

Environment

Product

Progress® Kendo UI for Angular Window

Description

I want to use Dialog-like animations with the Kendo UI for Angular Window component. Is there a way to implement similar animation features for it?

This Knowledge Base article also answers the following questions:

• How can I add animations to the Kendo UI for Angular Window component?
• What are the steps to implement fade-in effects for the Kendo UI for Angular Window?
• Can Angular animations be applied to the Kendo UI for Angular Window?

Solution

To add animations to the Kendo UI for Angular Window component, utilize Angular's animation capabilities. You can achieve various animation effects, including fade-in and fade-out, by defining animations in your Angular component and applying them to the Window component. Here's how to set up a basic fade-in animation:

Using Angular Animations

1. Import the Angular animation functions in your component:

   ts

   import { trigger, state, style, transition, animate } from '@angular/animations';

2. Define the animation in your component's decorator:

   ts

   @Component({
     selector: 'app-my-window',
     templateUrl: './my-window.component.html',
     styleUrls: ['./my-window.component.css'],
     animations: [
       trigger('fadeInOut', [
         state('void', style({
           opacity: 0
         })),
         transition(':enter', [
           animate('300ms ease-in', style({
             opacity: 1
           }))
         ]),
         transition(':leave', [
           animate('300ms ease-out', style({
             opacity: 0
           }))
         ])
       ])
     ]
   })
   export class MyWindowComponent {
     // Your component logic here
   }

3. Apply the animation to the Kendo UI for Angular Window in your component template:

   html

   <kendo-window [@fadeInOut]>
     <!-- Window content here -->
   </kendo-window>

4. (Optional) For more complex animations, consider exploring the Angular animations documentation.

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

See Also

• Window Overview
• API Reference of the Window Component
• Official Angular Animations Guide