ReferenceError: KeyframeEffect is not defined in paper component
I am creating a web application and for the dropdown I am using paper-dropdown-menu My code has remained simple and follows the demo closely here
Here's a snippet of code:
<link rel="import" href="/polymer/polymer-element.html">
<link rel="import" href="/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/paper-item/paper-icon-item.html">
<link rel="import" href="/paper-listbox/paper-listbox.html">
<link rel="import" href="/iron-icons/maps-icons.html">
<dom-module id="isochrone-settings-element">
<template>
...
<div id="settings">
<paper-dropdown-menu label="Travel mode">
<paper-listbox slot="dropdown-content" attr-for-selected="value" selected={{selectedItem}}>
<paper-icon-item value="auto">
<iron-icon icon="maps:directions-car" slot="item-icon"></iron-icon>Driving
</paper-icon-item >
<paper-icon-item value="bicycle">
<iron-icon icon="maps:directions-bike" slot="item-icon"></iron-icon>Cycling
</paper-icon-item>
<paper-icon-item value="bus">
<iron-icon icon="maps:directions-bus" slot="item-icon"></iron-icon>Bus
</paper-icon-item>
<paper-icon-item value="pedestrian">
<iron-icon icon="maps:directions-walk" slot="item-icon"></iron-icon>Walking
</paper-icon-item>
</paper-listbox>
</paper-dropdown-menu>
</div>
</template>
.....
</dom-module>
The thing is, when I try to use the dropdown in a webapp, I get the following error:
neon-animation-runner-behavior.html:40 Couldnt play ( fade-in-animation ). ReferenceError: KeyframeEffect is not defined
at HTMLElement.configure (fade-in-animation.html:39)
at HTMLElement._configureAnimations (neon-animation-runner-behavior.html:33)
at HTMLElement.playAnimation (neon-animation-runner-behavior.html:93)
at HTMLElement._renderOpened (iron-dropdown.html:233)
at HTMLElement.__openedChanged (iron-overlay-behavior.html:541)
at nextAnimationFrame (iron-overlay-behavior.html:566)
The same error occurs at least 3 times every time I use the menu.
Now I am looking at the component itself, but since I haven't found many problems that look relevant on the web, I think the problem might come from me.
Is there something clearly wrong with this snippet?
thank
source to share
You need to enable polyfill for WebAnimation API. The animation you are trying to use is only available in Chrome Canary. Just add:
<link rel="import" href="../../neon-animation/web-animations.html">
The reserved line in the source code can be found here.
And here you will get updates if you need to enable these changes
source to share