围绕Web Animation API的安全包装

围绕Web Animation API的安全包装

JavaScript 其它杂项

访问GitHub主页

共73Star

详细介绍

nanoanimation

npm version build status downloads js-standard-style

Safety wrapper around the Web Animations API. Allows animations to safely be defined in Node, and browsers that don't support the Web Animation API. Default behavior is to do nothing.

Usage

var animation = require('nanoanimation')
var css = require('sheetify')
var html = require('bel')

css('tachyons')

var el = html`
  <div class="bg-red h5 w5" onclick=${() => move.play()}>
    Hello planet
  </div>
`

var keyFrames = [
  { transform: 'translateY(0%)' },
  { transform: 'translateY(100%)' }
]

var timingProperties = {
  duration: 1000,
  fill: 'forwards'
}

var animate = animation(keyFrames, timingProperties)
var move = animate(el, function () {
  console.log('event ended')
})
document.body.appendChild(el)

API

animate = animation(keyFrames, timingProperties)

Create a new animation.

WebAnimation = animate(el, [done])

Apply an animation to an element, calls done when finished. Returns the nativate Web Animation object.

See Also

License

MIT

推荐源码