Layout Plugin

  1. Docs
  2. Layout Plugin

The Layout plugin manages CSS transitions during layout changes and signals when the app has finished loading.

Behavior

The Layout plugin performs two key tasks automatically:

  1. Hold Transitions - During window resize, CSS transitions on the sidebar, navbar, and content area are temporarily disabled to prevent visual glitches. The hold-transition class is added to <body> for the duration.

  2. App Loaded Signal - After a 400ms delay on DOMContentLoaded, the app-loaded class is added to <body>. Use this class in CSS to defer animations until the app is ready, preventing flicker on initial page load.

CSS Classes
Class Description
hold-transition Temporarily disables CSS transitions on layout elements. Applied during window resize.
app-loaded Added to <body> after the initial layout is ready. Use for entrance animations.
Usage in CSS
/* Hide sidebar transitions until the app is loaded */
body:not(.app-loaded) .app-sidebar {
  transition: none !important;
}

/* Only animate after app is loaded */
body.app-loaded .app-sidebar {
  transition: width 0.3s ease;
}
Programmatic API

The Layout plugin self-initializes on DOMContentLoaded — there’s nothing to wire up manually. The only public method is exposed for advanced cases where you want to suppress transitions around your own DOM mutations: 

import { Layout } from "admin-lte"

const layout = new Layout(document.body)
layout.holdTransition(200)   // disable transitions for 200ms

// ... do something that would otherwise animate awkwardly
document.body.classList.toggle("sidebar-mini")
Methods
Method Returns Description
holdTransition(time?) void Adds hold-transition to <body>, removes it after time milliseconds (default 100). Use to suppress CSS transitions during programmatic layout changes.
Notes
  • The hold-transition class is automatically removed after the timeout. You don’t need to clean up.
  • No data attributes — the plugin reads no config and initialises with the body element on page load.
  • If you need to detect when the initial page-load animations are done, watch for the app-loaded class on <body> or listen for the standard load event.