third_party/polymer/components-chromium/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 `<core-transition-css>` implements CSS transitions as `<core-transition>` objects so they can be
  11 reused in a pluggable transition system such as in `<core-overlay>`. Currently this class has
  12 some specific support to animate an element from and to the viewport such as a dialog, but you
  13 can override it for different effects.
  14
  15 Example:
  16
  17 my-css-transition.html:
  18
  19     <polymer-element name="my-css-transition" extends="core-transition-css">
  20     <template>
  21         <style>
  22             :host(.my-transition) {
  23                 opacity: 0;
  24                 transition: transform 1s ease-out, opacity 1s ease-out;
  25             }
  26             :host(.my-transition.my-opened) {
  27                 opacity: 1;
  28                 transform: none;
  29             }
  30             :host(.my-transition-top) {
  31                 transform: translateY(-100vh);
  32             }
  33             :host(.my-transition-bottom) {
  34                 transform: translateY(100vh);
  35             }
  36         </style>
  37     </template>
  38     <script>
  39       Polymer({
  40         baseClass: 'my-transition',
  41         openedClass: 'my-opened'
  42       });
  43     </script>
  44     </polymer-element>
  45
  46     <my-css-transition id="my-transition-top" transitionType="top"></my-css-transition>
  47     <my-css-transition id="my-transition-bottom" transitionType="bottom"></my-css-transition>
  48
  49 my-css-transition-demo.html
  50
  51     <link href="components/core-meta/core-meta.html" rel="import">
  52     <link href="my-css-transition.html">
  53
  54     <div id="animate-me"></div>
  55
  56     <script>
  57         // Get the core-transition
  58         var meta = document.createElement('core-meta');
  59         meta.type = 'transition';
  60         var transition1 = meta.byId('my-transition-top');
  61
  62         // Set up the animation
  63         var animated = document.getElementById('animate-me');
  64         transition1.setup(animated);
  65         transition1.go(animated, {opened: true});
  66     </script>
  67
  68 The first element in the template of a `<core-transition-css>` object should be a stylesheet. It
  69 will be injected to the scope of the animated node in the `setup` function. The node is initially
  70 invisible with `opacity: 0`, and you can transition it to an "opened" state by passing
  71 `{opened: true}` to the `go` function.
  72
  73 All nodes being animated will get the class `my-transition` added in the `setup` function.
  74 Additionally, the class `my-transition-<transitionType>` will be applied. You can use the
  75 `transitionType` attribute to implement several different behaviors with the same
  76 `<core-transition-css>` object. In the above example, `<my-css-transition>` implements both
  77 sliding the node from the top of the viewport and from the bottom of the viewport.
  78
  79 Available transitions
  80 ---------------------
  81
  82 `<core-transition-css>` includes several commonly used transitions.
  83
  84 `core-transition-fade`: Animates from `opacity: 0` to `opacity: 1` when it opens.
  85
  86 `core-transition-center`: Zooms the node into the final size.
  87
  88 `core-transition-top`: Slides the node into the final position from the top.
  89
  90 `core-transition-bottom`: Slides the node into the final position from the bottom.
  91
  92 `core-transition-left`: Slides the node into the final position from the left.
  93
  94 `core-transition-right`: Slides the node into the final position from the right.
  95
  96 @group Polymer Core Elements
  97 @element core-transition-css
  98 @extends core-transition
  99 @status beta
 100 @homepage github.io
 101 --><html><head><link rel="import" href="core-transition.html">
 102
 103 </head><body><polymer-element name="core-transition-css" extends="core-transition" attributes="transitionType" assetpath="">
 104 <template>
 105   <link no-shim="" rel="stylesheet" href="core-transition-overlay.css">
 106 </template>
 107
 108 </polymer-element>
 109
 110 <core-transition-css id="core-transition-fade"></core-transition-css>
 111 <core-transition-css id="core-transition-center" transitiontype="center"></core-transition-css>
 112 <core-transition-css id="core-transition-top" transitiontype="top"></core-transition-css>
 113 <core-transition-css id="core-transition-bottom" transitiontype="bottom"></core-transition-css>
 114 <core-transition-css id="core-transition-left" transitiontype="left"></core-transition-css>
 115 <core-transition-css id="core-transition-right" transitiontype="right"></core-transition-css>
 116 <script charset="utf-8" src="core-transition-css-extracted.js"></script></body></html>