Gitiles
Code Review Sign In
gerrit.avm99963.com / hores-external / c36d7162ccce53bb6c067839cb5489b54c0595cd / . / node_modules / material-design-lite / dist / components / animation / demo.html
blob: d74309fae8aed9f9d5216a7692c5ed81a98ca2a3 [file] [log] [blame]
Copybara botbe50d492023-11-30 00:16:42 +0100[diff] [blame]1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 <title>animation test</title>
9
10 <!-- Fonts -->
11 <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
12 <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
13 rel="stylesheet">
14
15 <!-- Page styles -->
16 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.css">
17 <link rel="stylesheet" href="../../material.min.css">
18 <link rel="stylesheet" href="../../components/demos.css">
19 <script src="../../material.min.js"></script>
20
21
22 <style>
23 /**
24 * Copyright 2015 Google Inc. All Rights Reserved.
25 *
26 * Licensed under the Apache License, Version 2.0 (the "License");
27 * you may not use this file except in compliance with the License.
28 * You may obtain a copy of the License at
29 *
30 * http://www.apache.org/licenses/LICENSE-2.0
31 *
32 * Unless required by applicable law or agreed to in writing, software
33 * distributed under the License is distributed on an "AS IS" BASIS,
34 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
35 * See the License for the specific language governing permissions and
36 * limitations under the License.
37 */
38
39.demo-animation {
40 height: 200px;
41 width: 300px;
42 padding: 0;
43 background: none;
44}
45
46.demo-animation__container {
47 position: relative;
48 overflow: hidden;
49 margin: 0;
50 padding: 0;
51 width: 100%;
52 height: 100%;
53 text-align: center;
54 background-color: #ddd;
55}
56
57.demo-animation__container-foreground {
58 width: 100%;
59 height: 100%;
60 position: absolute;
61 left: 0;
62 top: 0;
63 z-index: 100;
64}
65
66.demo-animation__container-background {
67 line-height: 200px;
68 z-index: -100;
69}
70
71/* Outside the view, on the left.
72 We leave the view when moving to this state, so we use fast-out-linear-in. */
73.demo-animation--position-0 {
74 left: -102px;
75}
76
77/* Left side.
78 We enter the view when moving to this state, so we use linear-out-slow-in. */
79.demo-animation--position-1 {
80 left: 20px;
81}
82
83/* Right side.
84 We're always visible when moving to this state, so we use default. */
85.demo-animation--position-2 {
86 left: 180px;
87}
88
89/* Outside the view, on the right.
90 We leave the view when moving to this state, so we use fast-out-linear-in. */
91.demo-animation--position-3 {
92 left: 302px;
93}
94
95/* Right side.
96 We enter the view when moving to this state, so we use linear-out-slow-in. */
97.demo-animation--position-4 {
98 left: 180px;
99}
100
101/* Left side.
102 We're always visible when moving to this state, so we use default. */
103.demo-animation--position-5 {
104 left: 20px;
105}
106
107.demo-animation__movable {
108 background-color: red;
109 border-radius: 2px;
110 display: block;
111 height: 100px;
112 width: 100px;
113 position: absolute;
114 top: 50px;
115 transition-property: left;
116 transition-duration: 0.2s;
117}
118
119 </style>
120
121 </head>
122 <body>
123
124 <div style="padding-top: 24px;">
125
126
127 <div class="demo-preview-block demo-animation demo-js-animation">
128 <div class="demo-animation__container">
129 <div class="demo-animation__container-background">Click me to animate</div>
130 <div class="demo-animation__container-foreground"></div>
131 <div class="demo-animation__movable demo-animation--position-0 mdl-shadow--2dp"></div>
132 </div>
133 </div>
134
135
136 </div>
137 <!-- Built with love using Material Design Lite -->
138
139
140 <script>
141 /**
142 * @license
143 * Copyright 2015 Google Inc. All Rights Reserved.
144 *
145 * Licensed under the Apache License, Version 2.0 (the "License");
146 * you may not use this file except in compliance with the License.
147 * You may obtain a copy of the License at
148 *
149 * http://www.apache.org/licenses/LICENSE-2.0
150 *
151 * Unless required by applicable law or agreed to in writing, software
152 * distributed under the License is distributed on an "AS IS" BASIS,
153 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
154 * See the License for the specific language governing permissions and
155 * limitations under the License.
156 */
157
158/**
159 * Class constructor for Animation MDL component.
160 * Implements MDL component design pattern defined at:
161 * https://github.com/jasonmayes/mdl-component-design-pattern
162 * @param {HTMLElement} element The element that will be upgraded.
163 */
164function DemoAnimation(element) {
165 'use strict';
166
167 this.element_ = element;
168 this.position_ = this.Constant_.STARTING_POSITION;
169 this.movable_ = this.element_.querySelector('.' + this.CssClasses_.MOVABLE);
170 // Initialize instance.
171 this.init();
172}
173
174/**
175 * Store strings for class names defined by this component that are used in
176 * JavaScript. This allows us to simply change it in one place should we
177 * decide to modify at a later date.
178 * @enum {string}
179 * @private
180 */
181DemoAnimation.prototype.CssClasses_ = {
182 MOVABLE: 'demo-animation__movable',
183 POSITION_PREFIX: 'demo-animation--position-',
184 FAST_OUT_SLOW_IN: 'mdl-animation--fast-out-slow-in',
185 LINEAR_OUT_SLOW_IN: 'mdl-animation--linear-out-slow-in',
186 FAST_OUT_LINEAR_IN: 'mdl-animation--fast-out-linear-in'
187};
188
189/**
190 * Store constants in one place so they can be updated easily.
191 * @enum {string | number}
192 * @private
193 */
194DemoAnimation.prototype.Constant_ = {
195 STARTING_POSITION: 0,
196 // Which animation to use for which state. Check demo.css for an explanation.
197 ANIMATIONS: [
198 DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
199 DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
200 DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN,
201 DemoAnimation.prototype.CssClasses_.FAST_OUT_LINEAR_IN,
202 DemoAnimation.prototype.CssClasses_.LINEAR_OUT_SLOW_IN,
203 DemoAnimation.prototype.CssClasses_.FAST_OUT_SLOW_IN
204 ]
205};
206
207/**
208 * Handle click of element.
209 * @param {Event} event The event that fired.
210 * @private
211 */
212DemoAnimation.prototype.handleClick_ = function(event) {
213 'use strict';
214
215 this.movable_.classList.remove(this.CssClasses_.POSITION_PREFIX +
216 this.position_);
217 this.movable_.classList.remove(this.Constant_.ANIMATIONS[this.position_]);
218
219 this.position_++;
220 if (this.position_ > 5) {
221 this.position_ = 0;
222 }
223
224 this.movable_.classList.add(this.Constant_.ANIMATIONS[this.position_]);
225 this.movable_.classList.add(this.CssClasses_.POSITION_PREFIX +
226 this.position_);
227};
228
229/**
230 * Initialize element.
231 */
232DemoAnimation.prototype.init = function() {
233 'use strict';
234
235 if (this.element_) {
236 if (!this.movable_) {
237 console.error('Was expecting to find an element with class name ' +
238 this.CssClasses_.MOVABLE + ' inside of: ', this.element_);
239 return;
240 }
241
242 this.element_.addEventListener('click', this.handleClick_.bind(this));
243 }
244};
245
246// The component registers itself. It can assume componentHandler is available
247// in the global scope.
248componentHandler.register({
249 constructor: DemoAnimation,
250 classAsString: 'DemoAnimation',
251 cssClass: 'demo-js-animation'
252});
253
254 </script>
255 </body>
256</html>