G

gaia-navigator

Partial implementation of my navigation transitions spec proposal.

Name Last Update
examples Loading commit data...
spec Loading commit data...
README.md Loading commit data...
gaia-navigator-wrapper.css Loading commit data...
gaia-navigator.js Loading commit data...

gaia-navigator

Gaia Navigator is a partial implementation of a specification proposal for CSS navigation transitions.

Limitations

  • Each page must include gaia-navigator.js. After the first navigation, each subsequent page will be wrapped in an iframe.
  • The first page must take care to remove event listeners that may continue to fire after navigation. Attaching to the navigationtransitionend event may aid in this.
  • For reverse animations to work correctly, CSS property animation-delay must always be specified together with animation-duration.
  • Direct manipulation of the history and location objects will have unexpected results, instead use the shim objects available via gnc_getHistory and gnc_getLocation.
  • The last declared navigation-transition-z-index will apply for the duration of all transitions.
  • navigation-transition-z-index will override the z-index of document.body children on the first loaded page.
  • The proposed CSSOM for this specification is not available using this shim.
  • Changing style properties on html, body or iframe during navigations on the first loaded page can have unexpected effects.

TODO

  • Support navigation-transition-start property
  • Support a preload spec

Examples

Simple slide between two pages:

[page-1.html]

<head>
  <style>
    body {
      margin: 0;
      height: 100%;
    }

    #bg {
      width: 100%;
      height: 100%;
      background-color: red;
    }

    @navigation-transition exit 0.25s {
      #bg {
        animation-name: slide-left;
        animation-duration: 0.25s;
      }
    }

    @keyframes slide-left {
      from {}
      to { transform: translateX(-100%); }
    }
  </style>
</head>
<body>
  <div id="bg" onclick="window.location='page-2.html'"></div>
</body>

[page-2.html]

<head>
  <link rel="transition-enter" duration="0.25s" href="page-2-enter.css" />
  <style>
    body {
      margin: 0;
      height: 100%;
    }

    #bg {
      width: 100%;
      height: 100%;
      background-color: green;
    }

    @navigation-transition enter 0.25s {
      #bg {
        animation-name: slide-from-left;
        animation-duration: 0.25s;
      }
    }

    @keyframes slide-from-left {
      from { transform: translateX(100%) }
    }
  </style>
</head>
<body>
  <div id="bg" onclick="history.back()"></div>
</body>