полимер 3,0 неперехваченная ошибка ссылки на раскрывающемся меню - PullRequest
Новая
       9

полимер 3,0 неперехваченная ошибка ссылки на раскрывающемся меню

0 голосов
/ 06 сентября 2018

после импорта: 

import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
import '@polymer/paper-listbox/paper-listbox.js';
import '@polymer/paper-item/paper-item.js';

Раскрывающийся список не выдает ошибку, если оставить ее в покое, но при нажатии (будет повторяться при нескольких щелчках) он будет производить его. 

Uncaught ReferenceError: KeyframeEffect is not defined
    at HTMLElement.configure (fade-in-animation.js:32)
    at HTMLElement._configureAnimations (neon-animation-runner-behavior.js:42)
    at HTMLElement.playAnimation (neon-animation-runner-behavior.js:122)
    at HTMLElement._renderOpened (iron-dropdown.js:200)
    at HTMLElement.__openedChanged (iron-overlay-behavior.js:608)
    at HTMLElement.nextAnimationFrame (iron-overlay-behavior.js:634)

Вот код, который я пытаюсь заставить работать: 

<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox slot="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Я попытался импортировать neon-animations.js, neon-animation.js и neon-animated-поведения.js. Глядя на аналогичные проблемы из других вопросов, их решения заключаются в том, чтобы импортировать веб-анимацию в их html-файл, но мой код находится в js-файле, поэтому он не будет работать.

как примечание, я не использую беседу или метеор.

Ответы [ 5 ]

0 голосов
/ 29 января 2019

Что касается предыдущего ответа от MKant, если у вас есть сайт ASP.net, вам нужно будет добавить два последних тега сценария для полизаполнений в ваш файл cshtml или любой другой файл, который вызывает ваш элемент Polymer. Если вы добавите их в код модуля template, он не будет работать.

0 голосов
/ 15 января 2019

Вам необходимо установить элемент neon-animation. Сделайте это: 

npm install --save @polymer/neon-animation

Это добавит зависимость neon-animation в ваш package.json и также установит ее. Добавьте полифилл web-animations-js: 

npm install --save web-animations-js

Как только вы закончите установку этих двух. По мнению, который отвечает за выпадающий список. Добавьте следующий код: 

 import {NeonAnimationRunnerBehavior} from '@polymer/neon-animation/neon-animation-runner-behavior.js';

вам придется использовать mixinbehavior, поэтому добавьте это как импорт: 

 import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';

Теперь скажите, что имя класса - MyView1, где вы отображаете этот выпадающий список, сделайте следующее: 

class MyView1 extends mixinBehaviors([NeonAnimationRunnerBehavior], PolymerElement) {

Теперь нам нужно добавить polyfill web-animations-js в index.html сразу после загрузчика веб-компонентов: 

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

Это точно сработает!

0 голосов
/ 09 сентября 2018

Полифилл Web Animations устраняет обнаруженную ошибку. Установите его с npm: 

npm i -S web-animations-js

Затем импортируйте его перед использованием paper-dropdown-menu, например:

Firefox: 

import 'web-animations-js/web-animations-next-lite.min.js';

демо 1

Chrome 

<script src="./node_modules/web-animations-js/web-animations-next-lite.min.js"></script>

Примечание. К сожалению, в Chrome файл web-animations-next-lite.min.js необходимо импортировать с тегом <script> (например, в index.html). Это работает как в Firefox, так и в Chrome.

демо 2

0 голосов
/ 14 сентября 2018

в package.json "зависимости" 

   "web-animations-js": "^2.3.1"

в Polymer.json "ExtraDependencies" 

   "node_modules/web-animations-js/*.js"

в index.html ПОСЛЕ скрипта загрузчика веб-компонентов 

   <script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
   <script src="node_modules/web-animations-js/web-animations-next.min.js"></script>

импорт любой из версий polyfill web-animation-js в виде модулей javascript непосредственно в моем элементе и сборка с помощью Polymer CLI привели к ошибке темы. Синхронная загрузка версии polyfill web-animations-next.min.js в index.html после того, как скрипт загрузчика веб-компонентов исправил ошибку для меня

0 голосов
/ 08 сентября 2018

Неоновые анимации официально устарели, в любом случае вы все равно можете загрузить их с https://www.npmjs.com/package/@polymer/neon-animation

Чтобы импортировать их в ваш полимерный проект из npm: 

npm install --save @polymer/neon-animation
...