聚合物霓虹灯动画示例没有动画

Question

所以我采用了此处找到的示例霓虹灯动画代码 http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html

并将其复制到我的 c9.io IDE 环境中，看看除了在我的环境中工作之外，我是否可以在不进行任何更改的情况下让它工作。我不能。

我的代码运行没有像上面的例子那样制作动画。页面发生变化，但不会左右滑动。他们只是改变了。

代码的副本如下，注意我对示例代码所做的唯一真正更改是指向我自己的存储库的导入语句，以及一些控制台日志。

我假设我的 Polymer 安装代码存在版本问题。但我注意到聚合物文件不记录它们的版本号。我使用 bower 安装#^1.0.0;尽管我确实遇到了 "Unable to find a suitable version" 错误并且必须解决这些错误。

查看我的 Polymer 代码版本并将其与原始示例代码使用的版本进行比较，我可以看出有些不同，但是随着大量导入的进行，遵循所有重要的陈述和找出所有不同点。

有没有办法确定版本？有没有办法验证我是什么运行？欢迎提出任何建议？

        <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">&lt;&lt;</button>
              <button on-click="_onNextClick">&gt;&gt;</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>

Answer 1

代码正确。 Here 是将您的代码转储到 JSBin 中并且可以正常工作。

neon-animation 实现了 web-animations-js - 也许您安装了 v2.1.1 breaks neon-animation。您可以通过查看 bower_components/<element-name> 目录中的 .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"
  },

聚合物霓虹灯动画示例没有动画

Polymer neon-animations example not animating

polymer