Question

所以我在这里找到了http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/declarative/index.html

中的霓虹动画代码示例

并将其复制到我的c9.io IDE环境中，看看我是否可以在没有其他更改的情况下使用它，而不是在我的环境中工作。我不能。

我正在运行的代码没有动画上述示例的方式。页面更改，但它们不会左右滑动。他们只是改变了。

下面是代码的副本，注意到我们对示例代码所做的只是真正的更改是指向我自己的存储库的import语句，还有一些控制台日志。

我假设我的Polymer安装代码存在版本问题。但我注意到聚合物文件没有记录它们的版本号。我用bower安装＃^ 1.0.0;虽然我确实得到“无法找到合适的版本”错误，但不得不解决这些问题。

查看我的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 - 也许您安装了breaks neon-animation的v2.1.1。您可以通过查看.bower.json目录中的bower_components/<element-name>文件来检查版本。

更新你的组件，你应该没事。当我将我的凉亭依赖关系设置为：

时，我没有遇到任何问题

  "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"
  },

聚合物霓虹灯动画示例不动画

1 个答案: