OLD | NEW |
(Empty) | |
| 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.g
ithub.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/CONTRI
BUTORS.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/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <!-- |
| 11 |
| 12 `<core-transition-css>` implements CSS transitions as `<core-transition>` object
s so they can be |
| 13 reused in a pluggable transition system such as in `<core-overlay>`. Currently t
his class has |
| 14 some specific support to animate an element from and to the viewport such as a d
ialog, 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-tran
sition> |
| 49 <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-cs
s-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 p
assing |
| 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 ca
n use the |
| 77 `transitionType` attribute to implement several different behaviors with the sam
e |
| 78 `<core-transition-css>` object. In the above example, `<my-css-transition>` impl
ements both |
| 79 sliding the node from the top of the viewport and from the bottom of the viewpor
t. |
| 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 botto
m. |
| 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" assetpath=""> |
| 108 <template> |
| 109 <link no-shim="" rel="stylesheet" href="core-transition-overlay.css"> |
| 110 </template> |
| 111 |
| 112 </polymer-element> |
| 113 |
| 114 <core-transition-css id="core-transition-fade"></core-transition-css> |
| 115 <core-transition-css id="core-transition-center" transitiontype="center"></core-
transition-css> |
| 116 <core-transition-css id="core-transition-top" transitiontype="top"></core-transi
tion-css> |
| 117 <core-transition-css id="core-transition-bottom" transitiontype="bottom"></core-
transition-css> |
| 118 <core-transition-css id="core-transition-left" transitiontype="left"></core-tran
sition-css> |
| 119 <core-transition-css id="core-transition-right" transitiontype="right"></core-tr
ansition-css> |
| 120 <script src="core-transition-css-extracted.js"></script> |
OLD | NEW |