| Index: third_party/polymer/components-chromium/core-transition/demo.html
|
| diff --git a/third_party/polymer/components-chromium/core-transition/demo.html b/third_party/polymer/components-chromium/core-transition/demo.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..9efd403a3e1257db5da053ba82f8f05c25613583
|
| --- /dev/null
|
| +++ b/third_party/polymer/components-chromium/core-transition/demo.html
|
| @@ -0,0 +1,87 @@
|
| +<!doctype html>
|
| +<!--
|
| +Copyright 2013 The Polymer Authors. All rights reserved.
|
| +Use of this source code is governed by a BSD-style
|
| +license that can be found in the LICENSE file.
|
| +-->
|
| +<html>
|
| +<head>
|
| +
|
| + <meta charset="utf-8">
|
| + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
| + <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
|
| +
|
| + <title>core-transition</title>
|
| +
|
| + <script src="../platform/platform.js"></script>
|
| +
|
| + <link href="core-transition-css.html" rel="import">
|
| +
|
| + <style>
|
| + #animate-me {
|
| + background-color: lime;
|
| + position: fixed;
|
| + top: 100px;
|
| + width: 100%;
|
| + height: 100%;
|
| + }
|
| + </style>
|
| +
|
| +</head>
|
| +<body unresolved>
|
| +
|
| + <div id="animate-me" hidden></div>
|
| +
|
| + <select id="sel" onchange="setup();">
|
| + <option value="core-transition-fade" selected>core-transition-fade</option>
|
| + <option value="core-transition-center">core-transition-center</option>
|
| + <option value="core-transition-top">core-transition-top</option>
|
| + <option value="core-transition-bottom">core-transition-bottom</option>
|
| + <option value="core-transition-left">core-transition-left</option>
|
| + <option value="core-transition-right">core-transition-right</option>
|
| + </select>
|
| +
|
| + <button onclick="stuff();">toggle</button>
|
| +
|
| + <script>
|
| +
|
| + document.addEventListener('polymer-ready', function() {
|
| + // initial setup
|
| + setup();
|
| + document.getElementById('animate-me').removeAttribute('hidden');
|
| + });
|
| +
|
| + var meta;
|
| + var transition;
|
| + var state = {
|
| + opened: false
|
| + }
|
| +
|
| + function getMeta() {
|
| + if (!meta) {
|
| + meta = document.createElement('core-meta');
|
| + meta.type = 'transition';
|
| + }
|
| + return meta;
|
| + }
|
| +
|
| + function setup() {
|
| + var target = document.getElementById('animate-me');
|
| +
|
| + if (transition) {
|
| + transition.teardown(target);
|
| + }
|
| +
|
| + var value = document.getElementById('sel').selectedOptions[0].value;
|
| + transition = getMeta().byId(value);
|
| + transition.setup(target);
|
| + }
|
| +
|
| + function stuff() {
|
| + var target = document.getElementById('animate-me');
|
| + state.opened = !state.opened;
|
| + transition.go(target, state);
|
| + }
|
| + </script>
|
| +</body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 592593002:
Inline scripts were extracted from Polymer elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master