Member Avatar for Mohamed_26

Hello I am looking to use transistions from one page to another. How do I go about doing it?

Thanksss

  • 3 Contributors
  • 3 Replies
  • 252 Views
  • 19 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short answer: you cannot reliably animate a transition between two separate HTML documents with only CSS because navigation unloads the current page. Modern browsers now offer the View Transition API to make smooth same-document and opt-in cross-document transitions, but support and behavior vary by browser — so treat it as an enhancement, not a requirement. As hinted, simple onload/onbeforeunload tricks are brittle; was right to warn about UX, bfcache and reliability. View Transition API, Chrome guide. (developer.mozilla.org)

If you need broad compatibility today, use a “navigation-as-state-change” pattern: intercept internal link clicks, fetch the new page fragment, animate the old content out, swap the fragment in, update title/history and restore focus. That gives you full control, keeps real URLs for SEO, and gracefully falls back to normal navigation when JS is unavailable. Minimal pattern (conceptual):

// intercept link, fetch and swap #main
document.addEventListener('click', e => {
  const a = e.target.closest('a');
  if (!a || a.origin !== location.origin) return;
  e.preventDefault();
  const url = a.href;
  const main = document.querySelector('#main');
  main.classList.add('exit'); // CSS handles exit animation
  fetch(url, { credentials: 'same-origin' })
    .then(r => r.text())
    .then(html => {
      const doc = new DOMParser().parseFromString(html, 'text/html');
      main.innerHTML = doc.querySelector('#main').innerHTML;
      document.title = doc.title;
      history.pushState({}, '', url);
      main.classList.remove('exit'); // play enter animation
      main.querySelector('h1')?.focus(); // accessibility
    });
});

Use the Fetch API and History API for this workflow; update focus and titles for accessibility and handle popstate for back/forward. (developer.mozilla.org)

If you target modern browsers, the View Transition API greatly simplifies transitions: wrap your DOM update in document.startViewTransition(() => { /* swap content */ }) or opt into cross-document transitions with @view-transition in CSS. Always provide a non-animated fallback. (developer.mozilla.org)

Libraries like Barba, Swup or Turbo can save time by handling fetches, history and lifecycle hooks — useful if you do not want to build everything from scratch. But be mindful: avoid intrusive popups, do not rely on unload/beforeunload hacks (they block bfcache and hurt UX), and keep server-rendered or pre-rendered URLs for SEO. Test for accessibility (focus order, screen reader announcements) and performance. Barba, swup, Turbo. (barba.js.org)

Recommended Answers

All 3 Replies

Member Avatar for AleMonteiro

You can't really make transitions between two pages, but you can give a better impression with something like this.

// Hide your main div when leaving the page
window.onbeforeunload = function() {
    $("#myMainDiv").hide('fade');
};

// Shows your man div when loading the page
window.onload = function() {
    $("#myMainDiv").show('slide');
};
Member Avatar for Mohamed_26

Is this javascript? DO i use this in CSS?

Member Avatar for almostbob

it is javascript,
it will not work all the time, (IE<9 of course, or high security settings), when it does work (justabout everything else) it is effective.
it may add to apparent page load time,

onload and onunload scripts, are often considered malware, as the popup porn industry, and may get, if used injudiciously, any external code, penalised delisting from ser,

NOT displaying the most important part of the page immediately, kills user retention, the user wants the content NOW thats what they came for, display everything else whenever you like

Edited by almostbob
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.