third_party/polymer/components-chromium/core-animation/demo.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>core-animation</title>
   5     <script src="../platform/platform.js"></script>
   6     <link rel="import" href="core-animation.html">
   7     <link rel="import" href="core-animation-group.html">
   8
   9 <!--     <link rel="import" href="polymer-blink.html">
  10     <link rel="import" href="polymer-bounce.html">
  11     <link rel="import" href="polymer-fadein.html">
  12     <link rel="import" href="polymer-fadeout.html">
  13     <link rel="import" href="polymer-flip.html">
  14     <link rel="import" href="polymer-shake.html">
  15  -->
  16     <style>
  17       body {
  18         text-align: center;
  19         font-family: Helvetica, sans-serif;
  20       }
  21       div#target {
  22         display: inline-block;
  23         background-color: dimgrey;
  24         border-radius: 5px;
  25         padding: 5px 10px;
  26         margin: 50px;
  27         font-size: 30px;
  28         color: white;
  29       }
  30       div.animations > * {
  31         display: inline-block;
  32         background-color: darkgrey;
  33         border-radius: 5px;
  34         padding: 5px 10px;
  35         margin: 5px;
  36         color: white;
  37       }
  38     </style>
  39   </head>
  40   <body>
  41
  42     <div id="target">animated!</div>
  43
  44     <div class="animations">
  45
  46       <core-animation id="raw" duration="1000">
  47         raw
  48         <core-animation-keyframe>
  49           <core-animation-prop name="opacity" value="1">
  50           </core-animation-prop>
  51         </core-animation-keyframe>
  52         <core-animation-keyframe>
  53           <core-animation-prop name="opacity" value="0.3">
  54           </core-animation-prop>
  55         </core-animation-keyframe>
  56         <core-animation-keyframe>
  57           <core-animation-prop name="opacity" value="1">
  58           </core-animation-prop>
  59         </core-animation-keyframe>
  60       </core-animation>
  61
  62       <core-animation-group type="seq">
  63         raw group
  64         <core-animation duration="300">
  65           <core-animation-keyframe>
  66             <core-animation-prop name="opacity" value="1">
  67             </core-animation-prop>
  68           </core-animation-keyframe>
  69           <core-animation-keyframe>
  70             <core-animation-prop name="opacity" value="0.3">
  71             </core-animation-prop>
  72           </core-animation-keyframe>
  73           <core-animation-keyframe>
  74             <core-animation-prop name="opacity" value="1">
  75             </core-animation-prop>
  76           </core-animation-keyframe>
  77         </core-animation>
  78         <core-animation duration="300">
  79           <core-animation-keyframe>
  80             <core-animation-prop name="transform" value="scale(1)">
  81             </core-animation-prop>
  82           </core-animation-keyframe>
  83           <core-animation-keyframe>
  84             <core-animation-prop name="transform" value="scale(1.2)">
  85             </core-animation-prop>
  86           </core-animation-keyframe>
  87           <core-animation-keyframe>
  88             <core-animation-prop name="transform" value="scale(1)">
  89             </core-animation-prop>
  90           </core-animation-keyframe>
  91         </core-animation>
  92       </core-animation-group>
  93
  94       <core-animation id="custom-animation" duration="500">custom</core-animation>
  95
  96       <core-animation duration="1000" iterations="Infinity" direction="alternate">
  97         infinite
  98         <core-animation-keyframe>
  99           <core-animation-prop name="opacity" value="1">
 100           </core-animation-prop>
 101         </core-animation-keyframe>
 102         <core-animation-keyframe>
 103           <core-animation-prop name="opacity" value="0.3">
 104           </core-animation-prop>
 105         </core-animation-keyframe>
 106       </core-animation>
 107 <!--       <polymer-bounce duration="1000">bounce</polymer-bounce>
 108       <polymer-shake>shake</polymer-shake>
 109       <polymer-flip>flip X</polymer-flip>
 110       <polymer-flip axis="y">flip Y</polymer-flip>
 111       <polymer-blink>blink</polymer-blink>
 112       <polymer-fadein>fade in</polymer-fadein>
 113  -->    </div>
 114     <script>
 115       var customAnimationFn = function(timeFraction, target) {
 116         if (timeFraction < 1) {
 117           target.textContent = timeFraction;
 118         } else {
 119           target.textContent = 'animated!';
 120         }
 121       };
 122
 123       document.addEventListener('polymer-ready', function() {
 124         document.querySelector('.animations').addEventListener('click',
 125           function(e) {
 126             var animation = e.target;
 127             if (animation.id === 'custom-animation') {
 128               animation.customEffect = customAnimationFn;
 129             }
 130             animation.target = target;
 131             animation.play();
 132           });
 133           document.getElementById('raw').addEventListener(
 134             'core-animation-finish', function(e) {
 135               console.log('finish!');
 136             });
 137       });
 138     </script>
 139   </body>
 140 </html>