merge from dev

This commit is contained in:
Luke Pulverenti 2016-01-30 13:52:33 -05:00
parent 8436c7ff3c
commit db793b9d25
46 changed files with 646 additions and 356 deletions

View file

@ -1,7 +1,7 @@
{
"name": "neon-animation",
"description": "A system for animating Polymer-based web components",
"version": "1.0.9",
"version": "1.1.0",
"authors": [
"The Polymer Authors"
],
@ -34,7 +34,6 @@
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#2.1.3"
},
"devDependencies": {
@ -42,18 +41,19 @@
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"
},
"_release": "1.0.9",
"_release": "1.1.0",
"_resolution": {
"type": "version",
"tag": "v1.0.9",
"commit": "ab40f4e4a777153cb5c27c9b62ee82b94d53eb76"
"tag": "v1.1.0",
"commit": "564e0dc92724f2bc0bf0f76bf2ac392d4905b2ff"
},
"_source": "git://github.com/polymerelements/neon-animation.git",
"_target": "^1.0.0",

View file

@ -1,18 +1,20 @@
language: node_js
sudo: false
node_js: 4
node_js: stable
addons:
firefox: latest
apt:
sources:
- google-chrome
- ubuntu-toolchain-r-test
packages:
- google-chrome-stable
- g++-4.8
sauce_connect: true
before_script:
- npm install web-component-tester
- npm install bower
- 'export PATH=$PWD/node_modules/.bin:$PATH'
- npm install -g bower polylint web-component-tester
- bower install
- polylint
script:
- xvfb-run wct
- "if [ \"${TRAVIS_PULL_REQUEST}\" = \"false\" ]; then wct -s 'default'; fi"
@ -20,3 +22,4 @@ env:
global:
- secure: AnPpB3uzTWU0hmrDmPyOb/3mJZRv4BgPFJrpaT/mQ/9979IBeFfFHJX6MqQlgo894lJWvKSvAjEutgK5Z3LQh6cLB3JuhPBInwKgFPUx/V14VIju+Z7jwx6RycE3flb2f9Y6y5My13ovswsTNnhJEkpDGlbRnJlh5c+HeP+6D0oFPFaGWvULZsAHQnEykir1TMPL2TD8SfuYWifmBj7QYQ2vsYnqZoAkPNedv/OtdoA3rziFXSG3GqXX2NJVnYqlaLj/HiHK7xLlZu/ODfo6En12DMtqJajBP7NfJkEUAF72ScOsYxlwiI1aYcVSUy6upkxxPwkBj5x7wDZ0tRFmlautyq2skDAh/fgIfRw9AMe8kj/YLef+T8bmZNT9IIelNaNcpfTQHpYWcOpPk2uBT3iIOcmp+Ys8RZKqzYmekBtHTwCGmQcfQrjBXjrjz5xlUaoMH7vauh7Ct7SkD7Fu87XSUvks4v2yypxxmHXO8jUilKuUdtAzb3dtOboO0ptsoLuBm/qSeURco4be6KPyVnDxdWdbYOxIZtE8JeY2DbonS45OgFtL1NKeEIhiTQIcOuSs0qwJFFzaBBAfek1tkTvBhMJP3JPWpIbNJhdZWzSd0LUSe892sbiZJY67FA4xcY8vK5JZNWnxFyKX1+A8ljPEd1yBImxMzUDMNS9t0G0=
- secure: jdh0G/FDRghnjasav0/8nOZsYgXUd5DLKgD5XrDCVrBvPwXly+AnMXE+Hr/bztEXylcEmcqrWUUfB1ODUdVn1EGk8CJaYpHyKcoMcpJiEjHYS/3i1rXRsnHs2o3dcRO69rA8A5LZeG3yYfiPVUiKlyl7MWOal3pNohDGi8dZcT0CoWnA8UaV//0uXG3GGG3X8KcbVfB2hQvG1mK6wM6W4eHVOplcBaE2xnnFDMxfU2KnRgjLSPw66PeJGczWOBR9fZql9p6kV38ZM2s4qnUsMlTZkNqn0f6CuEPqcG6+S6Tk9+0dvAHet+Ky9fgiyJPq+p6sDGfdm1ZJwOjz5MoyudzGSuHAJHH2nscQf8pUBQ1gxKaGg7GV9LUj0cjLDAFWA2KpxTlabDZhZPIMoMKFpqpvJG49gDVga5gGabom21nd/+E1i/2vvoP16kY9rjf+Gd5+tIzajXCu8Tq06Xz63idZDJbt38GjArfFFqe5k7CqE+m2vpWx/iTwe+cT70wnIq/xigvaNq6CgUuNdzkVnVBj/C7yVqwwZkfbBC7HhRna9Nyzts/j2M2vwy0oYB73WzuhpYSweaAOZq2kcUIQ5ZMGO3UkZRjwWnHxAi5mrvZhRcRIqkvJJhoMQnjwJSTah/3cz0cJh19DL+Ozde24/tuY+vOnhFb+ddo1OKD6FtM=
- CXX=g++-4.8

View file

@ -22,7 +22,7 @@ Configuration:
name: 'cascaded-animation',
animation: <animation-name>,
nodes: <array-of-nodes>,
nodedelay: <node-delay-in-ms>,
nodeDelay: <node-delay-in-ms>,
timing: <animation-timing>
}
```

View file

@ -47,8 +47,8 @@ Configuration:
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(-100%)'},
{'transform': 'none'}
{'transform': 'translateY(0%)'},
{'transform': 'translateY(100%)'}
], this.timingFromConfig(config));
return this._effect;

View file

@ -0,0 +1,59 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-bottom-animation>` animates the transform of an element from `none` to `translateY(100%)`.
The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-bottom-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-bottom-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(100%)'},
{'transform': 'translateY(0)'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

View file

@ -0,0 +1,59 @@
<!--
@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
-->
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../neon-animation-behavior.html">
<link rel="import" href="../web-animations.html">
<!--
`<slide-from-top-animation>` animates the transform of an element from `translateY(-100%)` to
`none`. The `transformOrigin` defaults to `50% 0`.
Configuration:
```
{
name: 'slide-from-top-animation',
node: <node>,
transformOrigin: <transform-origin>,
timing: <animation-timing>
}
```
-->
<script>
Polymer({
is: 'slide-from-top-animation',
behaviors: [
Polymer.NeonAnimationBehavior
],
configure: function(config) {
var node = config.node;
if (config.transformOrigin) {
this.setPrefixedProperty(node, 'transformOrigin', config.transformOrigin);
} else {
this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
}
this._effect = new KeyframeEffect(node, [
{'transform': 'translateY(-100%)'},
{'transform': 'translateY(0%)'}
], this.timingFromConfig(config));
return this._effect;
}
});
</script>

View file

@ -1,7 +1,7 @@
{
"name": "neon-animation",
"description": "A system for animating Polymer-based web components",
"version": "1.0.9",
"version": "1.1.0",
"authors": [
"The Polymer Authors"
],
@ -34,7 +34,6 @@
"iron-meta": "PolymerElements/iron-meta#^1.0.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-selector": "PolymerElements/iron-selector#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"web-animations-js": "web-animations/web-animations-js#2.1.3"
},
"devDependencies": {
@ -42,9 +41,10 @@
"paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"web-component-tester": "*",
"web-component-tester": "^4.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0"

View file

@ -32,7 +32,13 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
}
.toolbar {
position: relative;
padding: 8px;
background-color: white;
z-index: 12;
}
neon-animated-pages {
@ -74,8 +80,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<template is="dom-bind">
<div class="toolbar">
<button on-click="_onPrevClick">&lt;&lt;</button>
<button on-click="_onNextClick">&gt;&gt;</button>
<button on-click="_onPrevClick">&#8678;</button>
<button on-click="_onNextClick">&#8680;</button>
<button on-click="_onUpClick">&#8679;</button>
<button on-click="_onDownClick">&#8681;</button>
</div>
<neon-animated-pages id="pages" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
@ -105,6 +113,18 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
scope._onUpClick = function() {
this.entryAnimation = 'slide-from-top-animation';
this.exitAnimation = 'slide-down-animation';
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
scope._onDownClick = function() {
this.entryAnimation = 'slide-from-bottom-animation';
this.exitAnimation = 'slide-up-animation';
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
</script>
</body>

View file

@ -39,7 +39,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<template is="dom-bind">
<neon-animated-pages id="pages" selected="0">
<animated-grid on-tile-click="_onTileClick"></animated-grid>
<fullsize-page-with-card id="fullsize-card" hero-id="hero" on-click="_onFullsizeClick">
<fullsize-page-with-card id="fullsize-card" on-click="_onFullsizeClick">
</fullsize-page-with-card>
</neon-animated-pages>
</template>

View file

@ -280,12 +280,14 @@ The new page will slide in from the right, and the old page slide away to the le
Single element animations:
* `fade-in-animation` Animates opacity from `0` to `1`.
* `fade-out-animation` Animates opacity from `1` to `0`.
* `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`.
* `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`.
* `slide-down-animation` Animates transform from `translateY(-100%)` to `none`.
* `slide-up-animation` Animates transform from `none` to `translateY(-100%)`.
* `fade-in-animation` Animates opacity from `0` to `1`;
* `fade-out-animation` Animates opacity from `1` to `0`;
* `scale-down-animation` Animates transform from `scale(1)` to `scale(0)`;
* `scale-up-animation` Animates transform from `scale(0)` to `scale(1)`;
* `slide-down-animation` Animates transform from `none` to `translateY(100%)`;
* `slide-up-animation` Animates transform from `none` to `translateY(-100%)`;
* `slide-from-top-animation` Animates transform from `translateY(-100%)` to `none`;
* `slide-from-bottom-animation` Animates transform from `translateY(100%)` to `none`;
* `slide-left-animation` Animates transform from `none` to `translateX(-100%)`;
* `slide-right-animation` Animates transform from `none` to `translateX(100%)`;
* `slide-from-left-animation` Animates transform from `translateX(-100%)` to `none`;

View file

@ -95,6 +95,11 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
return;
}
if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
return;
}
// type is optional
var thisConfig;
if (type) {

View file

@ -8,6 +8,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
<link rel="import" href="neon-animatable-behavior.html">
<!--

View file

@ -213,7 +213,7 @@ animations to be run when switching to or switching out of the page.
},
_notifyPageResize: function() {
var selectedPage = this.selectedItem;
var selectedPage = this.selectedItem || this._valueToItem(this.selected);
this.resizerShouldNotify = function(element) {
return element == selectedPage;
}

View file

@ -18,6 +18,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<link rel="import" href="animations/scale-up-animation.html">
<link rel="import" href="animations/slide-from-left-animation.html">
<link rel="import" href="animations/slide-from-right-animation.html">
<link rel="import" href="animations/slide-from-top-animation.html">
<link rel="import" href="animations/slide-from-bottom-animation.html">
<link rel="import" href="animations/slide-left-animation.html">
<link rel="import" href="animations/slide-right-animation.html">
<link rel="import" href="animations/slide-up-animation.html">

View file

@ -1,14 +1,11 @@
<!doctype html>
<!--
<!DOCTYPE html><!--
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
-->
<html>
<head>
--><html><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>neon-animation tests</title>
@ -17,8 +14,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
<body>
<script>
WCT.loadSuites([
'neon-animated-pages.html'
'neon-animated-pages.html',
'neon-animated-pages.html?dom=shadow'
]);
</script>
</body>
</html>
</body></html>