文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物1.0和Django :未定义的ReferenceError: KeyframeEffect

问聚合物1.0和Django :未定义的ReferenceError: KeyframeEffect
EN

Stack Overflow用户

提问于 2015-07-10 08:19:06

回答 1查看 775关注 0票数 0

所以我一直在用django &Snap巨龙测试聚合物1.0。我可以渲染元素，但我被困在动画。这是我的代码，与google为近地天体动画提供的演示代码基本相同。我正在尝试声明性演示。当我为我的代码服务时

  ./manage.py run serve

我能够看到元素，但当我单击它时，它就停止工作了，从而产生了错误。

未曝光的ReferenceError: KeyframeEffect

没有定义。它打破了

Polymer.configure   @   opaque-animation.html:33

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

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

我注意到，我的第二个新动画元素的“不透明度”被卡住在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>

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

polymer-1.0

javascript

html

django

回答 1

Stack Overflow用户

发布于 2015-07-10 09:59:53

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31335803

复制

相似问题

问聚合物1.0和Django :未定义的ReferenceError: KeyframeEffect
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.0和Django :未定义的ReferenceError: KeyframeEffectEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物1.0和Django :未定义的ReferenceError: KeyframeEffect
EN