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 ответа:
Вот так: 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.