Custom Page Transitions
Animating between SPA states
You can replace the default progress bar and fade overlay by pointing config.transition.module to your own JavaScript file. A custom transition is just a standard BareMetal module that listens to routing events.
Rules for Custom Transitions
- The Protected Node: You must inject your transition UI into an element with
id="baremetal-transition-root". The Router explicitly protects this specific ID from being destroyed when it swaps thedocument.body.innerHTML. - Listen to Events: Use
state.on()to listen toROUTE_START,ROUTE_PROGRESS,ROUTE_END, andROUTE_ERROR.
Implementation Example
Here is an example of creating a custom loading spinner component.
custom_transition.js
export function mount({ state }) {
// 1. Create or get the protected root node
let root = document.getElementById('baremetal-transition-root');
if (!root) {
root = document.createElement('div');
root.id = 'baremetal-transition-root';
document.body.appendChild(root);
}
// 2. Build your custom UI (e.g., a spinner)
const spinner = document.createElement('div');
spinner.innerText = "Loading...";
spinner.style.display = 'none';
root.appendChild(spinner);
const unsubs = [];
// 3. Listen to Router events
unsubs.push(state.on('ROUTE_START', () => {
spinner.style.display = 'block';
}));
unsubs.push(state.on('ROUTE_PROGRESS', (payload) => {
// payload.progress goes from 0 to 100
spinner.innerText = `Loading... ${Math.round(payload.progress)}%`;
}));
unsubs.push(state.on('ROUTE_END', () => {
spinner.style.display = 'none';
}));
return {
destroy: () => {
unsubs.forEach(u => u());
if (root.parentNode) root.parentNode.removeChild(root);
}
};
}