Neon-Animated-размер анимации страниц с полимером


Я работаю над приложением, использующим полимер. Это приложение использует neon-animated-pages для перемещения между видами и вкладками. У меня есть Планк здесь . Некоторые соответствующие коды можно увидеть здесь:

<div style="width:33%; background-color:lightgrey;">
  <paper-button on-click="onItem1Click">Item 1</paper-button>
  <paper-button on-click="onItem2Click">Item 2</paper-button>
  <paper-button on-click="onItem3Click">Item 3</paper-button>
  <br /><br /><br /><br />
</div>

<div id="contentArea" style="width:67%; padding:12px;">
  <neon-animated-pages selected="[[ selectedIndex ]]" entry-animation="slide-left-animation" exit-animation="slide-left-animation">
    <section>
      <item-1></item-1>
    </section>

    <section>
      <item-2></item-2>
    </section>

    <section>
      <h4>Item 3</h4>
      <p>This is information for item #3.</p>
    </section>
  </neon-animated-pages>
</div>

Когда я нажимаю кнопку paper-button или paper-tab, появляется анимация нового содержимого. Тем не менее, когда содержимое уходит, оно анимируется слева в верхней части серой области навигации. Я хочу, чтобы содержимое анимировалось слева. Однако я не хочу, чтобы он охватывал "пункт 1", "пункт 2" и "пункт 3" в процессе. Это как элемент neon-animated-pages использует весь экран для анимации, а не только область, которой он ограничен, которая в этом случае была бы "contentArea" div. Но я не знаю, как это исправить.

2 3

2 ответа:

Вот так: http://plnkr.co/edit/LOqnbtdZJkr0xIgxsOyM?p=preview

Добавьте overflow-x: hidden; к вашей ширине 67% div.

Я столкнулся с той же проблемой на этом codepen некоторое время назад. Обратите внимание на закомментированное переполнение-x в строке 7 файла css.

Добавьте z-индекс к обоим контейнерам divs, например.

<div style="width:33%; background-color:lightgrey; z-index:1;"></div>
<div id="contentArea" style="width:67%; padding:12px; z-index:0"></div>

Вы также можете поместить свой css в тег стиля внутри этого полимерного элемента, чтобы отделить ваш html от вашего css.