Анимация дочернего элемента в Polymer

Можно ли анимировать дочерние элементы, не помещая их в пользовательский элемент с Polymer.NeonAnimatableBehavior? Кажется излишним оборачивать каждый анимируемый элемент как пользовательский элемент.


person Vicky Leong    schedule 11.07.2016    source источник
comment
используя свойство node для animationConfig, вы должны иметь возможность давать анимацию дочерним элементам. Что-то вроде node: this.$.placeholder   -  person a1626    schedule 11.07.2016
comment
Думаю, я понимаю, о чем вы говорите. У вас есть пример такого решения?   -  person Vicky Leong    schedule 12.07.2016
comment
Вы можете посмотреть этот код, например.   -  person a1626    schedule 12.07.2016
comment
Спасибо. Если напишете официальный ответ, я его приму.   -  person Vicky Leong    schedule 15.07.2016


Ответы (2)


Вы можете использовать neon-animatable

представляет собой простой элемент-контейнер, реализующий Polymer.NeonAnimatableBehavior. Это удобный элемент для использования с <neon-animated-pages>.

 <neon-animated-pages selected="0"
                 entry-animation="slide-from-right-animation"
                 exit-animation="slide-left-animation">
  <neon-animatable>1</neon-animatable>
  <neon-animatable>2</neon-animatable>
 </neon-animated-pages>
person miyamoto    schedule 11.07.2016

Вы можете анимировать элемент внутри настраиваемого элемента с помощью свойства node объекта animationConfig Object. Это будет что-то вроде

<div id="placeholder"></div>
<script>
 //rest of the code
 properties:{
  animationConfig:{
   value:function(){
    return {'entry':[{
     name: '<name of the animation>',
     node: this.$.placeholder
    }]}

Где placeholder - это элемент для анимации. Вы можете ознакомиться с этим neon-animation пример полного кода.

person a1626    schedule 15.07.2016