Полимер-герой-переход в пользовательском элементе

Я использую Polymer для новой версии на моем сайте. В настоящее время я экспериментирую с героем-переходом core-animated-pages. Некоторые примеры приведены in the core-animated-pages examples и особенно this one.Полимер-герой-переход в пользовательском элементе

С этими примерами я должен понять примеры, и я пришел к этому примеру: jsbin. Он не полностью отполирован, но он работает.

Теперь я хочу, чтобы в этом примере было показано, что в качестве примера вы видите карточку. Из этого пользовательского элемента мне понадобится два hero-id, один для изображения и один для названия альбома. Я попытался имитировать его в this example. Вот код:

альбом-карты пользовательских элементов

<polymer-element name="album-card"> 

    <template> 
    <style> 
     :host{ 
     display: block; 
     position: relative; 
     background-color: grey; 
     width: 200px; 
     } 
     .description{ 
     padding: 0px 10px; 
     color: white; 
     } 
     .cube{ 
     width: 200px; 
     height: 200px; 
     } 
    </style> 

    <div vertical layout> 
     <div class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div> 
     <div class="description"> 
     <content select="h2" hero-id="title-hero" hero></content> 
     <content select="h4"></content> 
     </div> 
    </div> 

    </template> 

    <script> 
    Polymer("album-card", {}); 
    </script> 

</polymer-element>

Основной элемент с тем, где переход появляется

<polymer-element name="my-app"> 

    <template> 
    <style> 
    </style> 

    <core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}"> 
     <section> 
     <album-card> 
      <h2>Album name</h2> 
      <h4>x pictures</h4> 
     </album-card> 
     </section> 
     <section> 
     <core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero> 
      <div class="title bottom" hero hero-id="title-hero">Album name</div> 
     </core-toolbar> 
     </section> 
    </core-animated-pages> 

    </template> 

    <script> 
    Polymer("my-app", { 
     photopage: 0, 
     albumTapped: function(){ 
     this.photopage++; 
     } 
    }); 
    </script> 

</polymer-element>

Теперь я знаю, что это происходит из-за теневой РОВ которые установлены атрибуты полей hero-id и hero, поэтому они недоступны для других элементов на странице, но есть ли способ вокруг этого в этом конкретном случае?

источник

2014-09-07 jdepypere

На самом деле это не о теневом домике. анимированный идет для героя «1 тень-глубины глубины» и пересекает любую тень-глубину.
Дело в том, что ваша пользовательская альбомная карта получала все «привязку» перед тем, как готовый обратный вызов и выталкивание.
Также, как вы выбрали выбранный альбом, я немного пошутил (по крайней мере, это то, что я рисую), поэтому с вашим кодом ( и я должен покинуть офис сейчас Я дома с удовольствием редактирую свой ответ и ударяющий материал) я сделал его работу ~~в обратном~~ взад и вперед, как например: your fixed code (updated 2)

Я сожалею, я бы не возиться больше с ним, потому что я действительно должен отпуск. Может быть, позже я вернусь и объясню это лучше, но, по крайней мере, ответ «TLDR» здесь: вы не должны связывать вещи перед готовным обратным вызовом (на самом деле вы можете, но это специфично и должно быть явно указано на прототипе элемента) , ~~Я, вероятно, вернусь сюда позже~~ (здесь я). Надеюсь, поможет. ADDENDUM: О, и я не заметил в то время (я спешил), вы вложили свой элемент в раздел с настраиваемыми элементами, которые не нужны (и не ожидаются компонентом в этом случае).

полный код только для копирования/вставки лёгкости:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
    <script src='http://www.polymer-project.org/webcomponents.js'></script> 
    <link rel='import' href='http://www.polymer-project.org/components/polymer/polymer.html'> 
    <link rel='import' href='http://www.polymer-project.org/components/core-animated-pages/core-animated-pages.html'> 
    <link rel='import' href='http://www.polymer-project.org/components/core-toolbar/core-toolbar.html'></head> 
<body> 
<!-- your album card element --> 
    <polymer-element name="album-card" noscript> 
    <template> 
     <style> 
      #thumbAlbum{ 
      display: block; 
      background-color: grey; 
      width: 200px; 
      } 
      #albumDesc{ 
      padding: 0px 10px; 
      color: white; 
      } 
      #albumCover{ 
      width: 200px; 
      height: 200px; 
      } 
     </style> 

     <div id="thumbAlbum" vertical layout> 
     <div id="albumCover" class="cube" style="background: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg) no-repeat; background-size: cover; background-position: center center;" hero-id="photo-hero" hero></div> 
     <div id="albumDesc" class="description"> 
      <content select="h2" hero-id="title-hero" hero></content> 
      <content select="h4"></content> 
     </div> 
     </div> 
    </template> 
    </polymer-element> 
<!-- your app alement --> 
    <polymer-element name="my-app"> 
    <template> 
     <core-animated-pages selected="{{photopage}}" transitions="hero-transition cross-fade" on-tap="{{albumTapped}}"> 
      <album-card> 
      <h2>Album name</h2> 
      <h4>x pictures</h4> 
      </album-card> 
      <section> 
      <core-toolbar class="tall" style="background-image: url(http://lorempixel.com/output/cats-q-c-640-480-3.jpg); background-size: cover;background-position: 50% 50%;" hero-id="photo-hero" hero> 
      <div class="title bottom" hero hero-id="title-hero">Album name</div> 
      </core-toolbar> 
     </section> 
     </core-animated-pages> 
    </template> 
    <script> 
     Polymer("my-app", { 
      photopage: 0, 
      ready:function(){ 
      }, 
      albumTapped: function(){ 
      this.photopage = this.photopage > 0 ? 0 : 1; 
      }, 
     }); 
     </script> 
    </polymer-element> 

    <my-app></my-app> 

</body> 
</html>

О, и на важном заметка на полях: всегда использовать webcomponents.js в platform.js устарела и не очень дружественные узнать проблемы. plus Импорт полимера.html.

источник

2014-12-12 21:04:49

В то же время я использую 'webcomponents.js', спасибо. Благодарим за обновление. Однако в скрипке название неправильно преобразуется - оно происходит из верхнего левого угла экрана, а не из названия альбома. – jdepypere

Я попытаюсь исправить это. если вы это выясните, дайте мне знать. я, вероятно, буду использовать эти переходы позже в моем проекте, использующем их, чтобы сделать большой опыт обучения. –

сделано. http://jsbin.com/doyisa/3/edit проверить это. проблема с названием, вероятно, была связана с глубиной тени, как вы уже догадались. простой обход - это тот, с которым я столкнулся, позже я попытаюсь справиться с чем-то более определенным. –

На самом деле, кажется, работает, если вы просто удалить album-card элемент из section элемента: http://jsbin.com/botoxaneju/1/edit?html,output

Я не совсем уверен, почему это, потому что я испытываю такую же проблему.

источник

2014-12-20 16:18:18

Полимер-герой-переход в пользовательском элементе

ответ

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