This plugin is in active development and your feedback is welcome
Simple attribute to use on router-view
to add back
and forward
classes during navigation in Aurelia projects.
The attribute will store a history and determine if router has navigated forward or back to previous route.
It will also listen to DOM events raised by aurelia-animator-css and hide scrollbars during animation. After animation the event on-animation-done
is raised.
Included is 3 animation classes to use for page transactions.
aurelia-cli
au install aurelia-mdc-pages-animator
main.js:
export function configure(aurelia) {
...
aurelia.use.plugin('aurelia-mdc-pages-animator');
...
}
also remember to install and configure aurelia-animator-css
app.html:
...
<require from="aurelia-mdc-pages-animator/pages.css"></require>
...
<router-view
swap-order="with"
aurelia-mdc-pages-animator
on-animation-done.delegate="onAnimationDone()">
</router-view>
...
somewhere (to prevent transparent page animation):
.pages {
background: #fff;
}
Decorate your pages with animation classes:
<template>
<div class="pages pages-detail au-animate">
...
</div>
</template>
or:
<template>
<div class="pages pages-fade au-animate">
...
</div>
</template>
or:
<template>
<div class="pages pages-tab au-animate">
...
</div>
</template>
To stop enter
animation just add pages-first
class:
<template>
<div class="pages pages-first pages-detail au-animate">
...
</div>
</template>
Default forward class is go-forward
. Default back class is go-back
.
Install dependencies:
npm install
Build and watch
npm start
Lint
npm run lint
Build dist (production)
npm run build
Build docs (production)
npm run docs
Build, add changelog, git add and tag (production)
npm run release
Visual and console. No tests has been created yet. Contribute?
Yes, please!