merge from dev
This commit is contained in:
parent
8436c7ff3c
commit
db793b9d25
46 changed files with 646 additions and 356 deletions
|
@ -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",
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
}
|
||||
```
|
||||
|
|
|
@ -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;
|
||||
|
|
59
dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html
vendored
Normal file
59
dashboard-ui/bower_components/neon-animation/animations/slide-from-bottom-animation.html
vendored
Normal 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>
|
59
dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html
vendored
Normal file
59
dashboard-ui/bower_components/neon-animation/animations/slide-from-top-animation.html
vendored
Normal 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>
|
|
@ -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"
|
||||
|
|
|
@ -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"><<</button>
|
||||
<button on-click="_onNextClick">>></button>
|
||||
<button on-click="_onPrevClick">⇦</button>
|
||||
<button on-click="_onNextClick">⇨</button>
|
||||
<button on-click="_onUpClick">⇧</button>
|
||||
<button on-click="_onDownClick">⇩</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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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`;
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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">
|
||||
|
||||
<!--
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue