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

   1 <!doctype html>
   2 <!--
   3 Copyright 2013 The Polymer Authors. All rights reserved.
   4 Use of this source code is governed by a BSD-style
   5 license that can be found in the LICENSE file.
   6 -->
   7 <html>
   8 <head>
   9
  10   <meta charset="utf-8">
  11   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  12   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  13
  14   <title>core-transition</title>
  15
  16   <script src="../webcomponentsjs/webcomponents.js"></script>
  17
  18   <link href="core-transition-css.html" rel="import">
  19
  20   <style>
  21     #animate-me {
  22       background-color: lime;
  23       position: fixed;
  24       top: 100px;
  25       width: 100%;
  26       height: 100%;
  27     }
  28   </style>
  29
  30 </head>
  31 <body unresolved>
  32
  33   <div id="animate-me" hidden></div>
  34
  35   <select id="sel" onchange="setup();">
  36     <option value="core-transition-fade" selected>core-transition-fade</option>
  37     <option value="core-transition-center">core-transition-center</option>
  38     <option value="core-transition-top">core-transition-top</option>
  39     <option value="core-transition-bottom">core-transition-bottom</option>
  40     <option value="core-transition-left">core-transition-left</option>
  41     <option value="core-transition-right">core-transition-right</option>
  42   </select>
  43
  44   <button onclick="stuff();">toggle</button>
  45
  46   <script>
  47
  48     document.addEventListener('polymer-ready', function() {
  49       // initial setup
  50       setup();
  51       document.getElementById('animate-me').removeAttribute('hidden');
  52     });
  53
  54     var meta;
  55     var transition;
  56     var state = {
  57       opened: false
  58     }
  59
  60     function getMeta() {
  61       if (!meta) {
  62         meta = document.createElement('core-meta');
  63         meta.type = 'transition';
  64       }
  65       return meta;
  66     }
  67
  68     function setup() {
  69       var target = document.getElementById('animate-me');
  70
  71       if (transition) {
  72         transition.teardown(target);
  73       }
  74
  75       var value = document.getElementById('sel').selectedOptions[0].value;
  76       transition = getMeta().byId(value);
  77       transition.setup(target);
  78     }
  79
  80     function stuff() {
  81       var target = document.getElementById('animate-me');
  82       state.opened = !state.opened;
  83       transition.go(target, state);
  84     }
  85   </script>
  86 </body>
  87 </html>