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")