2017-07-19 1 views
3

私は、Webアプリケーションを構築していますし、ドロップダウンリストのために、私はpaper-dropdown-menu 私のコードを使用していますが、単純な辞めている紙のコンポーネントで定義されている、と密接デモはここにReferenceError:KeyframeEffectは

hereを提示している次のされていませんコードのスニペット:

<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> 

事は、私がWebアプリケーションにドロップダウンを使用しようとすると、私は次のエラーを取得することです:

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) 

メニューを使用するたびに同じエラーが少なくとも3回スローされます。

私は今、コンポーネント自体に探していますが、私は、ウェブ上の関連を見、多くの問題を発見しないので、私は、問題は私から来るかもしれないと思います。

は、このスニペットとは明らかに間違っているものはありますか?

ありがとうございます。

答えて

4

WebAnimation APIにpolyfillを含める必要があります。使用しようとしているアニメーションは、Chrome Canaryでのみ使用できます。 ちょうど追加:

<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

+1

おかげで、それは私がコンポーネントからドキュメントを読んだ後、今調査しようとしていたものを、実際のです。私も今、別のインポートエラーが直面しています – jlengrand

+1

自体は、ウェブアニメーション-JSをインストールすることで解決した(ウェブアニメーション-JS /ウェブアニメーション - 次lite.min.jsの404)。今夜は少し疲れた。ありがとう:) – jlengrand

1

をあなたはネオ・アニメーションとウェブアニメーション-jsから

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

をインポートする必要があります次に、以下のインポートが含まれています。

<link rel="import" href="../bower_components/neon-animation/web-animations.html"> 
関連する問題