Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
polymer-ui-animated-pages: polymer-ui-pages with transitions
Browse files Browse the repository at this point in the history
  • Loading branch information
Yvonne Yip committed Oct 10, 2013
1 parent 8dc927e commit 97d91b3
Show file tree
Hide file tree
Showing 3 changed files with 309 additions and 0 deletions.
180 changes: 180 additions & 0 deletions polymer-ui-animated-pages/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,180 @@
<!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 class="polymer-ui-full-bleed">
<head>
<title>polymer-ui-animated-pages</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- load toolkit -->
<script src="../../polymer/polymer.js"></script>
<!-- import elements-->
<link rel="import" href="../../polymer-elements/polymer-animation/polymer-animation.html">
<link rel="import" href="../polymer-ui-toolbar/polymer-ui-toolbar.html">
<link rel="import" href="polymer-ui-animated-pages.html">
<!-- -->
<link rel="stylesheet" href="../basic.css">
<style>
polymer-ui-animated-pages-demo {
display: block;
height: 100%;
}
</style>
</head>
<body class="polymer-ui-body-text polymer-ui-full-bleed polymer-ui-light-bg">
<polymer-element name="polymer-ui-animated-pages-demo" attributes="page directional transitionInIndex transitionIn transitionOutIndex transitionOut">
<template>
<style>
polymer-ui-toolbar {
padding: 10px;
}
polymer-ui-toolbar label {
font-size: 12px;
}
polymer-ui-toolbar .spacer {
display: inline-block;
width: 5px;
}
polymer-ui-animated-pages {
display: block;
height: 100%;
}
polymer-ui-animated-pages > div {
display: -webkit-flex;
align-items: center;
justify-content: center;
font-size: 100px;
color: white;
}
.grid {
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAHklEQVQIW2NkQAX/GZH4/4FsRpgAmAOSBBFwDkgAAIKuBATRTAAZAAAAAElFTkSuQmCC) repeat;
}
.brick {
background: green url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAJElEQVQIW2NkwAT/GdHE/gP5jMiCYAGQIpggTACuEq4CatR/ABtJBwTL3L3TAAAAAElFTkSuQmCC) repeat;
}
.wave {
background: orange url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPklEQVQYV2NkwAT/gUKM6MLoAjBFGIqRFaJLovBhCrFaB7QeLg5SiEsRzJlgeQxHY/EcSOg/sQoxgwGHiQwA+f4KCL3Y/AQAAAAASUVORK5CYII=) repeat;
}
.dots {
background: purple url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;
}
.diamonds {
background: blue url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAUElEQVQYV2NkYGAwBuKzQAwDID4IoIgxIikAMZE1oRiArBDdZBSNMIXoJiFbDZYDKcSmCOYimDuNSVKIzRNYrUYOFuQgweoZbIoxgoeoAAcAEckW11HVTfcAAAAASUVORK5CYII=) repeat;
}
</style>
<polymer-ui-toolbar>
<button on-tap="rewindAction">&laquo;</button>
<button on-tap="forwardAction">&raquo;</button>
<span class="spacer"></span>
<button>+</button>
<span class="spacer"></span>
<label>
Directional:
<input type="checkbox" checked="{{directional}}">
</label>
<label>
TransIn:
<select id="transitionInSelect" selectedIndex="{{transitionInIndex}}">
<option>none</option>
<option>fade-in</option>
<option>hslide-in</option>
</select>
</label>
<span class="spacer"></span>
<label>
TransOut:
<select id="transitionOutSelect" selectedIndex="{{transitionOutIndex}}">
<option>none</option>
<option>fade-out</option>
<option>hslide-out</option>
<option>scale-out</option>
</select>
</label>
</polymer-ui-toolbar>
<polymer-ui-animated-pages selected="{{page}}" directional?="{{directional}}" transitionIn="{{transitionIn}}" transitionOut="{{transitionOut}}">
<div class="grid">One</div>
<div class="brick">Two</div>
<div class="wave">Three</div>
<div class="dots">Four</div>
<div class="diamonds">Five</div>
</polymer-ui-animated-pages>
<polymer-animation id="fade-in" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="0"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="fade-out" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="1"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="opacity" value="0"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="hslide-in" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(100%)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="hslide-out" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(0)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="translateX(-100%)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
<polymer-animation id="scale-out" duration="0.5">
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(1)"></polymer-animation-prop>
</polymer-animation-keyframe>
<polymer-animation-keyframe>
<polymer-animation-prop name="transform" value="scale(0.8)"></polymer-animation-prop>
</polymer-animation-keyframe>
</polymer-animation>
</template>
<script>
Polymer('polymer-ui-animated-pages-demo', {
page: 0,
directional: true,
transitionInIndex: 2,
transitionOutIndex: 2,
ready: function() {
this.transitionInIndexChanged();
this.transitionOutIndexChanged();
},
transitionInIndexChanged: function() {
var transitionInId = this.$.transitionInSelect.selectedOptions[0].textContent;
this.transitionIn = this.$[transitionInId];
},
transitionOutIndexChanged: function() {
var transitionOutId = this.$.transitionOutSelect.selectedOptions[0].textContent;
this.transitionOut = this.$[transitionOutId];
},
rewindAction: function() {
this.page -= 1;
if (this.page < 0) {
this.page = this.directional ? this.page + 1 : 4;
}
},
forwardAction: function() {
this.page += 1;
if (this.page > 4) {
this.page = this.directional ? this.page - 1 : 0;
}
}
});
</script>
</polymer-element>
<polymer-ui-animated-pages-demo></polymer-ui-animated-pages-demo>
</body>
</html>
15 changes: 15 additions & 0 deletions polymer-ui-animated-pages/metadata.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<x-meta id="polymer-ui-animated-pages" label="Polymer Animated Pages" isContainer>
<template>
<polymer-ui-animated-pages style="width: 400px; height: 400px;">
<section>
Page One
</section>
<section>
Page Two
</section>
</polymer-ui-animated-pages>
</template>
<template id="imports">
<link rel="import" href="polymer-ui-animated-pages.html">
</template>
</x-meta>
114 changes: 114 additions & 0 deletions polymer-ui-animated-pages/polymer-ui-animated-pages.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<!--
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.
-->
<!--
/**
* @module Polymer UI Elements
*/
-->
<!--
/**
* polymer-ui-animated-pages
*
* @class polymer-ui-animated-pages
* @extends polymer-selector
*/
-->

<link rel="import" href="../../polymer-elements/polymer-animation/web-animations.html">
<link rel="import" href="../polymer-ui-pages/polymer-ui-pages.html">

<polymer-element name="polymer-ui-animated-pages" extends="polymer-ui-pages" selected="0" notap attributes="directional transitionIn transitionOut prevSelectedItem">
<script>
Polymer('polymer-ui-animated-pages', {
/**
* Set this property to true if the direction of the transition
* animation depends on the order of the pages that are being
* transitioned. For example, sliding right to transition to the next
* page and sliding left to transition to the previous page is
* directional, while fading between pages is not.
*
* @attribute directional
* @type boolean
* @default false
*/
directional: false,
/**
* An animation for the page it's transitioning to. Set this and
* transitionOut to null for no animations.
*
* @attribute transitionIn
* @type polymer-animation
*/
transitionIn: null,
/**
* An animation for the page it's transitioning from. Set this and
* transitionIn to null for no animations.
*
* @attribute transitionOut
* @type polymer-animation
*/
transitionOut: null,
prevSelectedItem: null,
applySelection: function(item, isSelected, force) {
// Do nothing if using a transition.
if (force || !this.hasTransition()) {
this.super(arguments);
}
},
valueForNode: function(node) {
return this.super(arguments) || node;
},
hasTransition: function() {
return this.transitionIn || this.transitionOut;
},
applyTransition: function() {
if (this.prevSelectedItem) {
this.animation = this.makeTransitionAnimation();
document.timeline.play(this.animation);
// Apply the class after the animation starts playing to prevent
// a flicker at the end of the animation.
this.async(function() {
this.applySelection(this.prevSelectedItem, false, true);
this.applySelection(this.selectedItem, true, true);
});
} else {
this.applySelection(this.selectedItem, true, true);
}
},
makeTransitionAnimation: function() {
var from = this.transitionOut.target = this.prevSelectedItem;
var to = this.transitionIn.target = this.selectedItem;
var direction = "normal";
if (this.directional) {
if (this.valueToIndex(from) > this.valueToIndex(to)) {
direction = 'reverse';
this.transitionOut.target = this.selectedItem;
this.transitionIn.target = this.prevSelectedItem;
}
}
var animation = new ParGroup([
this.transitionOut.makeAnimation(),
this.transitionIn.makeAnimation(),
// Both 'from' and 'to' items must be visible and have the default
// z-index. Overrides the class styles.
new Animation(from, [{'visibility': 'visible', 'z-index': 'auto'}]),
new Animation(to, [{'visibility': 'visible', 'z-index': 'auto'}])
], {
fill: 'none',
direction: direction
});
return animation;
},
selectedItemChanged: function(oldItem) {
this.super(arguments);
this.prevSelectedItem = oldItem;
if (this.hasTransition()) {
this.applyTransition();
}
}
})
</script>
</polymer-element>

0 comments on commit 97d91b3

Please sign in to comment.