Polymer 聚合物霓虹灯动画示例未设置动画
所以我以这里找到的霓虹灯动画代码为例 并将其复制到我的c9.io IDE环境中，以查看除了在我的环境中工作外，是否可以在不进行任何更改的情况下使其工作。我不能 我正在运行的代码没有像上面的示例那样设置动画。页面会改变，但不会左右滑动。它们只是在变化。 下面是代码的副本，注意到我对示例代码所做的唯一真正更改是指向我自己的存储库的导入语句，以及一些控制台日志 我想我安装的代码有版本问题。但我注意到，polymer文件并没有记录它们的版本号。我用bower安装了#^1.0.0；虽然我确实遇到了“找不到合适的版本”的错误，但我必须解决这些错误 查看我的Polymer代码版本，并将其与原始示例代码所使用的代码进行比较，我可以看出有些代码是不同的，但是随着大量导入的进行，遵循所有重要语句并找出所有差异是不现实的 有没有办法确定版本？有没有办法验证我正在运行什么？欢迎提出任何建议Polymer 聚合物霓虹灯动画示例未设置动画,polymer,Polymer,所以我以这里找到的霓虹灯动画代码为例 并将其复制到我的c9.io IDE环境中，以查看除了在我的环境中工作外，是否可以在不进行任何更改的情况下使其工作。我不能 我正在运行的代码没有像上面的示例那样设置动画。页面会改变，但不会左右滑动。它们只是在变化。 下面是代码的副本，注意到我对示例代码所做的唯一真正更改是指向我自己的存储库的导入语句，以及一些控制台日志 我想我安装的代码有版本问题。但我注意到，polymer文件并没有记录它们的版本号。我用bower安装了#^1.0.0；虽然我确实遇到了“找不到
<head>
<title>neon-animated-pages demo: declarative</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="bower_components//webcomponentsjs/webcomponents-lite.js">
</script>
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-animatable.html">
<link rel="import" href="bower_components/neon-animation/neon-animations.html">
<style>
.toolbar {
padding: 8px;
}
</style>
<style is="custom-style">
neon-animatable {
color: white;
@apply(--layout-horizontal);
@apply(--layout-center-center);
@apply(--paper-font-display4);
}
neon-animatable:nth-child(1) {
background: var(--paper-red-500);
}
neon-animatable:nth-child(2) {
background: var(--paper-blue-500);
}
neon-animatable:nth-child(3) {
background: var(--paper-orange-500);
}
neon-animatable:nth-child(4) {
background: var(--paper-green-500);
}
neon-animatable:nth-child(5) {
background: var(--paper-purple-500);
}
</style>
</head>
<body class="fullbleed layout vertical">
<template is="dom-bind">
<div class="toolbar">
<button on-click="_onPrevClick"><<</button>
<button on-click="_onNextClick">>></button>
</div>
<neon-animated-pages id="pages" class="flex" selected="[[selected]]" entry-animation="[[entryAnimation]]" exit-animation="[[exitAnimation]]">
<neon-animatable>1</neon-animatable>
<neon-animatable>2</neon-animatable>
<neon-animatable>3</neon-animatable>
<neon-animatable>4</neon-animatable>
<neon-animatable>5</neon-animatable>
</neon-animated-pages>
</template>
<script>
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
var scope = document.querySelector('template[is="dom-bind"]');
scope.selected = 0;
scope._onPrevClick = function() {
console.log()
this.entryAnimation = 'slide-from-left-animation';
this.exitAnimation = 'slide-right-animation';
console.log(pages.entryAnimation);
this.selected = this.selected === 0 ? 4 : (this.selected - 1);
}
scope._onNextClick = function() {
this.entryAnimation = 'slide-from-right-animation';
this.exitAnimation = 'slide-left-animation';
console.log(pages.exitAnimation);
this.selected = this.selected === 4 ? 0 : (this.selected + 1);
}
</script>
</body>
</html>
霓虹灯动画页面演示：声明性
.工具栏{
填充：8px；
}
霓虹灯动画{
颜色：白色；
@应用（--水平布局）；
@应用（--布局中心）；
@应用（--paper-font-display4）；
}
霓虹灯可设置动画：第n个子项（1）{
背景：var（--paper-red-500）；
}
霓虹灯可设置动画：第n个孩子（2）{
背景：var（--纸蓝-500）；
}
霓虹灯可设置动画：第n个孩子（3）{
背景：var（--paper-orange-500）；
}
霓虹灯可设置动画：第n个孩子（4）{
背景：var（--paper-green-500）；
}
霓虹灯可设置动画：第n个孩子（5）{
背景：var（--paper-purple-500）；
}
1.
2.
3.
4.
5.
this.entryAnimation='从左滑动画'；
this.exitAnimation='slide right animation'；
var scope=document.querySelector（'template[is=“dom bind”]”）；
scope.selected=0；
作用域。\u onPrevClick=函数（）{
console.log（）
this.entryAnimation='从左滑动画'；
this.exitAnimation='slide right animation'；
console.log（pages.entryAnimation）；
this.selected=this.selected==0？4：（this.selected-1）；
}
作用域。_onNextClick=函数（）{
this.entryAnimation='从右侧滑动动画'；
this.exitAnimation='slide left animation'；
console.log（page.exitAnimation）；
this.selected=this.selected==4？0：（this.selected+1）；
}
neon动画web动画jsneon动画bower\u components/.bower.json "dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"layout": "Polymer/layout",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"gold-elements": "PolymerElements/gold-elements#^1.0.0",
"platinum-elements": "PolymerElements/platinum-elements#^1.0.0",
"neon-elements": "PolymerElements/neon-animation#^1.0.0"
},
neon动画web动画jsneon动画bower\u components/.bower.json "dependencies": {
"polymer": "Polymer/polymer#^1.0.0",
"layout": "Polymer/layout",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"gold-elements": "PolymerElements/gold-elements#^1.0.0",
"platinum-elements": "PolymerElements/platinum-elements#^1.0.0",
"neon-elements": "PolymerElements/neon-animation#^1.0.0"
},
我对自己的
bower.jsonbower.jsonbower.jsonbower.js中