third_party/polymer/components/core-transition/core-transition-css.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11
  12 `<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
  13 reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
  14 some specific support to animate an element from and to the viewport such as a dialog, but you
  15 can override it for different effects.
  16
  17 Example:
  18
  19 my-css-transition.html:
  20
  21     <polymer-element name="my-css-transition" extends="core-transition-css">
  22     <template>
  23         <style>
  24             :host(.my-transition) {
  25                 opacity: 0;
  26                 transition: transform 1s ease-out, opacity 1s ease-out;
  27             }
  28             :host(.my-transition.my-opened) {
  29                 opacity: 1;
  30                 transform: none;
  31             }
  32             :host(.my-transition-top) {
  33                 transform: translateY(-100vh);
  34             }
  35             :host(.my-transition-bottom) {
  36                 transform: translateY(100vh);
  37             }
  38         </style>
  39     </template>
  40     <script>
  41       Polymer({
  42         baseClass: 'my-transition',
  43         openedClass: 'my-opened'
  44       });
  45     </script>
  46     </polymer-element>
  47
  48     <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
  49     <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
  50
  51 my-css-transition-demo.html
  52
  53     <link href="components/core-meta/core-meta.html" rel="import">
  54     <link href="my-css-transition.html">
  55
  56     <div id="animate-me"></div>
  57
  58     <script>
  59         // Get the core-transition
  60         var meta = document.createElement('core-meta');
  61         meta.type = 'transition';
  62         var transition1 = meta.byId('my-transition-top');
  63
  64         // Set up the animation
  65         var animated = document.getElementById('animate-me');
  66         transition1.setup(animated);
  67         transition1.go(animated, {opened: true});
  68     </script>
  69
  70 The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
  71 will be injected to the scope of the animated node in the `setup` function. The node is initially
  72 invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
  73 `{opened: true}` to the `go` function.
  74
  75 All nodes being animated will get the class `my-transition` added in the `setup` function.
  76 Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
  77 `transitionType` attribute to implement several different behaviors with the same
  78 `<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
  79 sliding the node from the top of the viewport and from the bottom of the viewport.
  80
  81 Available transitions
  82 ---------------------
  83
  84 `<core-transition-css>` includes several commonly used transitions.
  85
  86 `core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
  87
  88 `core-transition-center`: Zooms the node into the final size.
  89
  90 `core-transition-top`: Slides the node into the final position from the top.
  91
  92 `core-transition-bottom`: Slides the node into the final position from the bottom.
  93
  94 `core-transition-left`: Slides the node into the final position from the left.
  95
  96 `core-transition-right`: Slides the node into the final position from the right.
  97
  98 @group Polymer Core Elements
  99 @element core-transition-css
 100 @extends core-transition
 101 @status beta
 102 @homepage github.io
 103 -->
 104
 105 <link rel="import" href="core-transition.html">
 106
 107 <polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType">
 108 <template>
 109   <link no-shim rel="stylesheet" href="core-transition-overlay.css">
 110 </template>
 111 <script>
 112
 113   Polymer('core-transition-css', {
 114
 115     /**
 116      * The class that will be applied to all animated nodes.
 117      *
 118      * @attribute baseClass
 119      * @type string
 120      * @default "core-transition"
 121      */
 122     baseClass: 'core-transition',
 123
 124     /**
 125      * The class that will be applied to nodes in the opened state.
 126      *
 127      * @attribute openedClass
 128      * @type string
 129      * @default "core-opened"
 130      */
 131     openedClass: 'core-opened',
 132
 133     /**
 134      * The class that will be applied to nodes in the closed state.
 135      *
 136      * @attribute closedClass
 137      * @type string
 138      * @default "core-closed"
 139      */
 140     closedClass: 'core-closed',
 141
 142     /**
 143      * Event to listen to for animation completion.
 144      *
 145      * @attribute completeEventName
 146      * @type string
 147      * @default "transitionEnd"
 148      */
 149     completeEventName: 'transitionend',
 150
 151     publish: {
 152       /**
 153        * A secondary configuration attribute for the animation. The class
 154        * `<baseClass>-<transitionType` is applied to the animated node during
 155        * `setup`.
 156        *
 157        * @attribute transitionType
 158        * @type string
 159        */
 160       transitionType: null
 161     },
 162
 163     registerCallback: function(element) {
 164       this.transitionStyle = element.templateContent().firstElementChild;
 165     },
 166
 167     // template is just for loading styles, we don't need a shadowRoot
 168     fetchTemplate: function() {
 169       return null;
 170     },
 171
 172     go: function(node, state) {
 173       if (state.opened !== undefined) {
 174         this.transitionOpened(node, state.opened);
 175       }
 176     },
 177
 178     setup: function(node) {
 179       if (!node._hasTransitionStyle) {
 180         if (!node.shadowRoot) {
 181           node.createShadowRoot().innerHTML = '<content></content>';
 182         }
 183         this.installScopeStyle(this.transitionStyle, 'transition',
 184             node.shadowRoot);
 185         node._hasTransitionStyle = true;
 186       }
 187       node.classList.add(this.baseClass);
 188       if (this.transitionType) {
 189         node.classList.add(this.baseClass + '-' + this.transitionType);
 190       }
 191     },
 192
 193     teardown: function(node) {
 194       node.classList.remove(this.baseClass);
 195       if (this.transitionType) {
 196         node.classList.remove(this.baseClass + '-' + this.transitionType);
 197       }
 198     },
 199
 200     transitionOpened: function(node, opened) {
 201       this.listenOnce(node, this.completeEventName, function() {
 202         if (!opened) {
 203           node.classList.remove(this.closedClass);
 204         }
 205         this.complete(node);
 206       });
 207       node.classList.toggle(this.openedClass, opened);
 208       node.classList.toggle(this.closedClass, !opened);
 209     }
 210
 211   });
 212 </script>
 213 </polymer-element>
 214
 215 <core-transition-css id="core-transition-fade"></core-transition-css>
 216 <core-transition-css id="core-transition-center" transitionType="center"></core-transition-css>
 217 <core-transition-css id="core-transition-top" transitionType="top"></core-transition-css>
 218 <core-transition-css id="core-transition-bottom" transitionType="bottom"></core-transition-css>
 219 <core-transition-css id="core-transition-left" transitionType="left"></core-transition-css>
 220 <core-transition-css id="core-transition-right" transitionType="right"></core-transition-css>