Question

我已经和Polymer玩了几天了，我想做一个菜单，点击菜单按钮后会出现/消失。问题是，我无法弄清楚为什么我的代码无法正常工作。

这是：

   <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

        <title>Title</title>

        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>

        <link rel="import" href="bower_components/font-roboto/roboto.html">
        <link rel="import" href="bower_components/core-icons/core-icons.html">
        <link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
        <link rel="import" href="bower_components/core-menu/core-menu.html">
        <link rel="import" href="bower_components/core-meta/core-meta.html">
        <link rel="import" href="bower_components/core-item/core-item.html">
        <link rel="import" href="bower_components/core-transition/core-transition.html">
        <link rel="import" href="bower_components/core-media-query/core-media-query.html">
        <link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
        <link rel="import" href="bower_components/paper-shadow/paper-shadow.html">
        </style>
    </head>
    <body unresolved>   
        <core-header-panel flex>
            <paper-shadow z="1">
                <core-toolbar>
                    <paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
                    <div flex>Project Management System</div>
                </core-toolbar>
            </paper-shadow>
        </core-header-panel>
        <div id="menu" class="core-menu">
            <core-item icon="settings" label="Settings"></core-item>
        </div>      
    </body>
</html>

和Javascript

<script>
    document.addEventListener('polymer-ready', function() {
        console.log('Polymer Ready');
    });

    var meta;
    var transition;


    function handleMenu() {
        var menu = document.getElementById('menu');

            meta = document.createElement('core-meta');
            meta.type = 'transition';

            console.log(meta.list);
            console.log(transition);

            transition.teardown(menu);
            transition = getMeta().byId('core-transition-left');
            transition.setup(menu);
            transition.go(menu, true);

            console.log('Tap');
    }
</script>

当我点击菜单按钮时，会出现错误：

未捕获的TypeError：无法读取属性＆＃39; teardown＆＃39;未定义的

我已经完成了演示页面上的所有内容，我一直在寻找正确的解决方案或一些答案，但没有...是否有人有想法？感谢

Answer 1

它不起作用，因为主要是你错过了演示页面中的https://www.polymer-project.org/components/core-transition/core-transition-css.html。

之后，getMeta（）方法也丢失了，并且菜单元素需要应用转换设置。

请参阅并尝试以下示例：

   document.addEventListener('polymer-ready', function() {
     console.log('Polymer Ready');

     setup();

   });

   var meta;
   var transition;
   var state = {
     opened: false
   };

   function setup() {
     var target = document.getElementById('menu');

     if (transition) {
       transition.teardown(target);
     }

     transition = getMeta().byId('core-transition-left');
     transition.setup(target);
   }

   function getMeta() {
     if (!meta) {
       meta = document.createElement('core-meta');
       meta.type = 'transition';
     }
     return meta;
   }

   function handleMenu() {
     var target = document.getElementById('menu');
     state.opened = !state.opened;
     transition.go(target, state);
   }

<script src="https://www.polymer-project.org/components/webcomponentsjs/webcomponents.js"></script>

<link rel="import" href="https://www.polymer-project.org/components/font-roboto/roboto.html">
<link rel="import" href="https://www.polymer-project.org/components/core-icons/core-icons.html">
<link rel="import" href="https://www.polymer-project.org/components/core-toolbar/core-toolbar.html">
<link rel="import" href="https://www.polymer-project.org/components/core-menu/core-menu.html">
<link rel="import" href="https://www.polymer-project.org/components/core-meta/core-meta.html">
<link rel="import" href="https://www.polymer-project.org/components/core-item/core-item.html">
<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition.html">
<link rel="import" href="https://www.polymer-project.org/components/core-media-query/core-media-query.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="https://www.polymer-project.org/components/paper-shadow/paper-shadow.html">


<link rel="import" href="https://www.polymer-project.org/components/core-transition/core-transition-css.html">

<body unresolved>

  <core-header-panel flex>
    <paper-shadow z="1">
      <core-toolbar>
        <paper-icon-button icon="menu" onclick="handleMenu()"></paper-icon-button>
        <div flex>Project Management System</div>
      </core-toolbar>
    </paper-shadow>
  </core-header-panel>
  <div id="menu" class="core-menu">
    <core-item icon="settings" label="Settings"></core-item>
  </div>

聚合物核心转换不起作用

1 个答案: