ReferenceError: KeyframeEffect is not defined in paper component

I am building a web application, and for a dropdown list I am using a paper-dropdown-menu My code is quit simple, and closely follows the demo presented here

Here is a snippet of the 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 that when I try to use the dropdown in the 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 is thrown at least 3 times every time I use the menu.

I am now looking into the component itself, but since I don't find many issues that look relevant on the web, I think the issue might come from me.

Is there anything obviously wrong with this snippet?

Thanks

Answers:

Answer

You need to include the polyfill for the WebAnimation API. The animation you try to use is only availible in Chrome Canary. Just add:

<link rel="import" href="../../neon-animation/web-animations.html">

The documented line in the source code can be found here.

And here you will receive updates if the need to include this changes

Answer

You will need to import neo-animation and web-animation-js

bower install --save PolymerElements/neon-animation
bower install --save web-animations-js

Then include the below import:

<link rel="import" href="../bower_components/neon-animation/web-animations.html">

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.