Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(364)

Side by Side Diff: third_party/polymer/components-chromium/core-transition/core-transition-css.html

Issue 592593002: Inline scripts were extracted from Polymer elements. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: s/echo ""/echo/ Created 6 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
(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>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698