• What is KendoReact
  • Getting Started
  • Server Components
  • Components
  • Sample Applications
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Changelog
  • Updates
  • Troubleshooting
Knowledge Base / Animate the Window / 

Animate the Window

Environment

ProductProgress® KendoReact

Description

How can I add animation to the KendoReact Window?

Solution

The Window can be animated with CSS.

	.k-window {
		transform: translateY(100%);
		opacity: 0;
		transition-property: transform, opacity;
		transition-duration: .5s;
		transition-function: ease-in-out;
	}

	.k-window.shown {
		transform: translateY(0);
		opacity: 1;
	}

A runnable example is available here.

Previous
Alternate the KendoReact Data Grid row colors with CSS
Next
Avoid unwanted change in the width of TreeList columns on resizing locked columns.

In this article

Not finding the help you need?

Contact Support