aurelia-mdc-pages-animator v0.1.0

aurelia-mdc-pages-animator

Project/demo page

This plugin is in active development and your feedback is welcome

What is this?

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.

Install

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.

Build from source

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

Tests

Visual and console. No tests has been created yet. Contribute?

Pull Requests

Yes, please!