so have been trying out polymer 1.0 django & snapdragon. able render elements stuck @ animations. code pretty same code demo provided google neo animations. trying out declarative demo. when serve code using
./manage.py run serve i able see elements stops working when click on giving error
uncaught referenceerror: keyframeeffect
is not defined. breaks @
polymer.configure @ opaque-animation.html:33 so looked @ file , piece of code throws error
this._effect = new keyframeeffect(node, [ {'opacity': '1'}, {'opacity': '1'} ] i noticed "opacity" of second neo-animitable element stuck @ 0 , not change 1 causing not show. sure paths script files , imports right in index.html. following code 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"><<</button> <button on-click="_onnextclick">>></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> after spending lot of time on trying figure out problem stuck. appreciated! thanks!
so easy fix @ end. did 1. reinstalled polymer components. 2. put {% endverbatim %} tag before script tag instead of after .
Comments
Post a Comment