@haxtheweb/haxcms-nodejs
Version:
HAXcms single and multisite nodejs server, api, and administration
40 lines (36 loc) • 2.01 kB
JavaScript
/**
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
part of the polymer project is also subject to an additional IP rights grant
found at http://polymer.github.io/PATENTS.txt
*/
import"../../../polymer/polymer-legacy.js";import{Polymer as a}from"../../../polymer/lib/legacy/polymer-fn.js";import{dom as e}from"../../../polymer/lib/legacy/polymer.dom.js";import{html as i}from"../../../polymer/lib/utils/html-tag.js";import{NeonSharedElementAnimatableBehavior as r}from"../../neon-shared-element-animatable-behavior.js";a({_template:i`
<style>
.header {
height: 40%;
background: var(--color-one);
}
.body {
text-align: center;
padding: 8px;
}
.square {
display: inline-block;
width: 150px;
height: 150px;
margin: 8px;
background: var(--color-two);
}
</style>
<div id="header" class="header"></div>
<div class="body">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
</div>
`,is:"squares-page",behaviors:[r],properties:{sharedElements:{type:Object},animationConfig:{type:Object}},attached:function(){if(!this.animationConfig){this.sharedElements={hero:this.$.header};var a=e(this.root).querySelectorAll(".square"),i=Array.from(a);this.animationConfig={entry:[{name:"hero-animation",id:"hero",toPage:this},{name:"cascaded-animation",animation:"transform-animation",transformFrom:"translateY(100%)",nodes:i}],exit:[{name:"slide-up-animation",node:this.$.header},{name:"cascaded-animation",animation:"transform-animation",transformTo:"translateY(60vh)",nodes:i}]}}}});