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 ponent itself, but since I don't find many issues that look relevant on the web, I think the issue might e from me.

Is there anything obviously wrong with this snippet?

Thanks

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 ponent itself, but since I don't find many issues that look relevant on the web, I think the issue might e from me.

Is there anything obviously wrong with this snippet?

Thanks

• javascript
• polymer
• polymer-2.x

Share Improve this question Follow asked Jul 19, 2017 at 18:55 jlengrandjlengrand 12.8k1414 gold badges6363 silver badges9797 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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_ponents/neon-animation/web-animations.html">