Question

所以我一直在用django＆amp; amp;金鱼草。我能够渲染元素，但我被困在动画中。这是我的代码，与Google为neo animations提供的演示代码完全相同。我正在尝试声明性演示。当我使用

提供代码时

  ./manage.py run serve

我能够看到这些元素，但是当我点击它时会停止工作，并给出错误

未捕获的ReferenceError：KeyframeEffect

未定义。它打破了

Polymer.configure   @   opaque-animation.html:33

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

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

我注意到了＆＃34;不透明度＆＃34;我的第二个neo-animitable元素被固定在0并且没有变为1导致它不显示。我确信脚本文件和导入的路径在我的index.html中是正确的。以下是我的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>

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

Answer 1

所以这最终很容易解决。我做的是 1.重新安装我的聚合物组件。 2.将 {％endverbatim％} 标记放在脚本标记之前，而不是之后。

Polymer 1.0和Django：Uncaught ReferenceError：未定义KeyframeEffect

1 个答案: