|
-
- <style>
- body {
- padding: 50px;
- }
-
- button {
- padding: 15px 25px;
- }
- </style>
-
- <button>Button</button>
-
- <script src="../build/build.js"></script>
-
- <script>
- var Tween = require('tween');
- var raf = require('component-raf');
- var button = document.querySelector('button');
-
- var tween = Tween({ rotate: 0, opacity: 0 })
- .ease('out-bounce')
- .to({ rotate: 360, opacity: 1 })
- .duration(800);
-
- tween.update(function(o){
- button.style.opacity = o.opacity;
- button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
- });
-
- tween.on('end', function(){
- animate = function(){};
- });
-
- function animate() {
- raf(animate);
- tween.update();
- }
-
- animate();
- </script>
|