聚合物霓虹灯-非动画示例
所以，我以这里的霓虹灯动画代码为例，components/neon-animation/demo/declarative/index.html。
并将其复制到我的c9.io IDE环境中，看看是否可以让它工作，而不是在我的环境中进行更改。我不行。
我正在运行的代码不像上面的例子那样生动。页面会改变，但是它们不会向左和向右滑动。他们只是改变了。
代码的副本如下所示，注意到我对示例代码所做的真正更改是指向我自己的存储库的导入语句，以及一些控制台日志。
我假设我的聚合物安装代码有一个版本问题。但是我注意到聚合物文件没有记录它们的版本号。我使用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>回答 1
Stack Overflow用户
发布于 2015-07-31 10:59:00
密码是正确的。这里是将代码转储到JSBin中的一个转储，它可以工作。
neon-animation实现了web-animations-js --也许您安装了2.1.1版本的休息 neon-animation。您可以通过查看您的.bower.json目录中的bower_components/<element-name>文件来检查版本。
更新您的组件，您应该会没事的。当我将bower依赖项设置为如下所示时，我没有遇到任何问题：
"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"
},https://stackoverflow.com/questions/31743643
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号