87 lines
2.2 KiB
HTML
87 lines
2.2 KiB
HTML
<!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="../webcomponentsjs/webcomponents.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>
|