Полимерный сердечник-переход не работает

Я играл с 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>

При нажатии на кнопку меню появится ошибка:

Uncaught TypeError: Не удается прочитать свойство 'демонтажа' of undefined

Я сделал все, что было на демо-странице, я был поиск правильного решения или ответы, но ничего ... у кого-нибудь есть идея? Thanks

источник

2015-01-11 Ondřej Rehák

Не работает, потому что в основном у вас отсутствовали 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>

источник

2015-01-12 03:16:51

Спасибо! Большое спасибо! Оно работает :) –

Полимерный сердечник-переход не работает

ответ

Смежные вопросы