Javascript Polymer 1.0和Django:未捕获引用错误：未定义KeyframeEffect_Javascript_Html_Django_Polymer 1.0

Javascript Polymer 1.0和Django:未捕获引用错误：未定义KeyframeEffect

javascript html django

Javascript Polymer 1.0和Django:未捕获引用错误：未定义KeyframeEffect,javascript,html,django,polymer-1.0,Javascript,Html,Django,Polymer 1.0,所以我一直在与django&snapdragon一起试用Polymer 1.0。我能够渲染元素，但我被困在动画。这是我的代码，它与google为我提供的演示几乎相同。我正在试用声明式演示。当我使用 ./manage.py run serve 我可以看到元素，但当我点击它时，它停止工作，给出错误信息未捕获引用错误：KeyframeEffect 没有定义。它在 Polymer.configure @ opaque-animation.html:33 所以我查看了这个文件，抛出错误

所以我一直在与django&snapdragon一起试用Polymer 1.0。我能够渲染元素，但我被困在动画。这是我的代码，它与google为我提供的演示几乎相同。我正在试用声明式演示。当我使用

  ./manage.py run serve

我可以看到元素，但当我点击它时，它停止工作，给出错误信息

未捕获引用错误：KeyframeEffect

没有定义。它在

Polymer.configure   @   opaque-animation.html:33

所以我查看了这个文件，抛出错误的代码是

  this._effect = new KeyframeEffect(node, [
    {'opacity': '1'},
    {'opacity': '1'}
  ]

我注意到我的第二个neo animitable元素的不透明度被固定在0，并且没有变为1，导致它不显示。我确信脚本文件和导入的路径在我的index.html中是正确的。下面是my index.html的代码

{% load static swampdragon_tags %}
<!DOCTYPE html>
<html>
<head>
   <title>Test</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="{% static 'bower_components/webcomponentsjs/webcomponents-lite.js' %}"></script>

   <link rel="import" href="{% static 'bower_components/paper-styles/paper-styles.html' %}">

   <link rel="import" href="{% static 'bower_components/neon-animation/neon-animated-pages.html' %}">
   <link rel="import" href="{% static 'bower_components/neon-animation/neon-animatable.html' %}">
   <link rel="import" href="{% static 'bower_components/neon-animation/neon-animations.html' %}">

   <style>
        body {
           overflow: hidden;
        }


   </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">

    {% verbatim %}

    <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>

       var scope = document.querySelector('template[is="dom-bind"]');
       scope.selected = 0;

       scope._onPrevClick = function() {
          this.entryAnimation = 'slide-from-left-animation';
          this.exitAnimation = 'slide-right-animation';
          this.selected = this.selected === 0 ? 4 : (this.selected - 1);
        }

       scope._onNextClick = function() {
          this.entryAnimation = 'slide-from-right-animation';
          this.exitAnimation = 'slide-left-animation';
          this.selected = this.selected ===  4 ? 0 : (this.selected + 1);
       }

   </script>

   {% endverbatim %}


</body>
</html>

在花了很多时间试图找出问题所在后，我陷入了困境。任何帮助都将不胜感激！谢谢

所以最后这是一个简单的解决办法。我所做的是 1.重新安装了我的聚合物组件。 2.将{%endverbatim%}标记放在脚本标记之前，而不是之后