• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject 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
13reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
14some specific support to animate an element from and to the viewport such as a dialog, but you
15can override it for different effects.
16
17Example:
18
19my-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
51my-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
70The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
71will be injected to the scope of the animated node in the `setup` function. The node is initially
72invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
73`{opened: true}` to the `go` function.
74
75All nodes being animated will get the class `my-transition` added in the `setup` function.
76Additionally, 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
79sliding the node from the top of the viewport and from the bottom of the viewport.
80
81Available 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>
221