Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hacke2/weex-animation
animation.css to weex-animation
https://github.com/hacke2/weex-animation
Last synced: about 1 month ago
JSON representation
animation.css to weex-animation
- Host: GitHub
- URL: https://github.com/hacke2/weex-animation
- Owner: hacke2
- License: mit
- Created: 2017-07-20T07:36:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-08-09T11:56:03.000Z (over 7 years ago)
- Last Synced: 2024-09-08T10:46:30.828Z (2 months ago)
- Language: JavaScript
- Homepage: http://www.hacke2.cn/weex-animation/
- Size: 215 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# weex-animation
demo: http://www.hacke2.cn/weex-animation/
like animation.css for weex.
Use weex playground scan:
## getting start
```bash
npm install weex-animation --save
```
## use case
```js
import animation from 'weex-animation';
animation.fadeIn(el);
```
you should add exclude 'weex-animation' to vue/js loader, because it should build in your project. like this:
```js
{
test: /\.vue(\?[^?]+)?$/,
loaders: ['weex-loader'],
exclude: function(modulePath) {
return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
}
},
{
test: /\.js$/,
loaders: ['babel-loader'],
exclude: function(modulePath) {
return /node_modules/.test(modulePath) && !/weex-animation/.test(modulePath);
}
}
```
## animation function
- [ ] bounce
- [x] flash
- [x] pulse
- [ ] rubberBand
- [x] shake
- [ ] headShake
- [ ] swing
- [ ] tada
- [ ] wobble
- [ ] jello
- [ ] bounceIn
- [ ] bounceInDown
- [ ] bounceInLeft
- [ ] bounceInRight
- [ ] bounceInUp
- [ ] bounceOut
- [ ] bounceOutDown
- [ ] bounceOutLeft
- [ ] bounceOutRight
- [ ] bounceOutUp
- [x] fadeIn
- [x] fadeInDown
- [x] fadeInDownBig
- [x] fadeInLeft
- [x] fadeInLeftBig
- [x] fadeInRight
- [x] fadeInRightBig
- [x] fadeInUp
- [ ] fadeInUpBig
- [x] fadeOut
- [ ] fadeOutDown
- [ ] fadeOutDownBig
- [ ] fadeOutLeft
- [ ] fadeOutLeftBig
- [ ] fadeOutRight
- [ ] fadeOutRightBig
- [ ] fadeOutUp
- [ ] fadeOutUpBig
- [ ] flipInX
- [ ] flipInY
- [ ] flipOutX
- [ ] flipOutY
- [ ] lightSpeedIn
- [ ] lightSpeedOut
- [ ] rotateIn
- [ ] rotateInDownLeft
- [ ] rotateInDownRight
- [ ] rotateInUpLeft
- [ ] rotateInUpRight
- [ ] rotateOut
- [ ] rotateOutDownLeft
- [ ] rotateOutDownRight
- [ ] rotateOutUpLeft
- [ ] rotateOutUpRight
- [ ] hinge
- [ ] jackInTheBox
- [ ] rollIn
- [ ] rollOut
- [x] zoomIn
- [ ] zoomInDown
- [ ] zoomInLeft
- [ ] zoomInRight
- [ ] zoomInUp
- [x] zoomOut
- [ ] zoomOutDown
- [ ] zoomOutLeft
- [ ] zoomOutRight
- [ ] zoomOutUp
- [ ] slideInDown
- [ ] slideInLeft
- [ ] slideInRight
- [ ] slideInUp
- [ ] slideOutDown
- [ ] slideOutLeft
- [ ] slideOutRight
- [ ] slideOutUp
## npm scripts
```bash
# build the two js bundles and watch file changes
npm run dev
```