Gaia Navigator is a partial implementation of a specification proposal for CSS navigation transitions.
- 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
navigationtransitionendevent may aid in this. - For reverse animations to work correctly, CSS property
animation-delaymust always be specified together withanimation-duration. - Direct manipulation of the history and location objects will have unexpected results, instead use the shim objects available via
gnc_getHistoryandgnc_getLocation. - The last declared
navigation-transition-z-indexwill apply for the duration of all transitions. navigation-transition-z-indexwill override thez-indexofdocument.bodychildren on the first loaded page.- The proposed CSSOM for this specification is not available using this shim.
- Changing style properties on
html,bodyoriframeduring navigations on the first loaded page can have unexpected effects.
- Support
navigation-transition-startproperty - Support a preload spec
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>