Search code examples
vaadinvaadin-flowvaadin24

Vaadin Flow 24 controll AppLayout animation

In Vaadin Flow 24, there is a visual effect--animation--where upon initial page load, the main content in the AppLayout seems to slide into place from the top-left corner of the screen.

Is it possible to control this effect and, for example, disable it?

Solution

  • it is possible to control and disable this animation effect. Here's how you can do it:

    Solution 1 : Java

     AppLayout appLayout = new AppLayout();
 appLayout.getElement().getStyle().set("--vaadin-app-layout-transition", 
 "none");

    Solution 2 : CSS

     vaadin-app-layout {
    --vaadin-app-layout-transition: none;
}

    don't forget to add the inline style to your view :

     @CssImport("./styles/my-view-styles.css")