开发者社区> 镜像站> NPM> choo-animate
choo-animate
add handi animations to choo native events
Last updated 3 years ago by yerkopalma .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install choo-animate 
SYNC missed versions from official npm registry.

choo-animate

add handi animations to choo native events

Usage

There are many ways to use this module.

var { fadeIn, fadeOut } = require('animation-toolbox')

var app = choo()
app.use(require('choo-animate')({
  animations: {'fadein': fadeIn, 'fadeout': fadeOut},
  before: 'fadeout',
  after: 'fadein'
}))

app.route('/', require('./views/main'))
app.route('/*', require('./views/404'))

app.mount('body')

Or through data tags

var { fadeIn, fadeOut } = require('animation-toolbox')

var app = choo()
app.use(require('choo-animate')({
  animations: {'fadein': fadeIn, 'fadeout': fadeOut}
}))

app.route('/', require('./views/main'))
app.route('/*', require('./views/404'))

app.mount('body')

// in your view
module.exports = function view (state, emit) {
  return html`<body data-before-transition="fadeout" data-after-transition="fadein">
  </body>`
}

API

var store = animate(opts)

You can pass two options to the store function:

  • animations: Required. An object where every property has a function as value, that get an element and return a Web Animation instance. This isn't quite accurate, because you could just return an object with a play function as a property, but is highly recommendable to use the web animation api, otherwise you should optimize and check manually a lot of stuff.
  • elements: Optional. An array like set of HTMLElements. animations will be applied to each of these elements. The store will first check for elements in your view with data-{before|after}-transition tags, if none is found, it will check if you provide this option, lastly, if not supplied, it would apply animations on document.body element.
  • before: Optional. A string with the name of the animation to be ran before a page transition (navigate event in choo lifecycle). If you have data transitions tags and also set this option, it will try to use the data tag, so you can use this to set different transitions on different elements.
  • after: Optional. A string with the name of the animation to be ran after a page transition (navigate event in choo lifecycle). If you have data transitions tags and also set this option, it will try to use the data tag, so you can use this to set different transitions on different elements.

See also

LICENSE

MIT

Current Tags

  • 1.0.0                                ...           latest (3 years ago)

1 Versions

  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (0)
None
Dependents (0)
None