Core-animated-pages, setting different transform duration/delay

[piturc...@gmail.com]

I am tying to set different transform duration or delay of core-animated-pages for some specific animations, my code looks like this:

<core-animated-pages transitions="scale-up">

   

      <section id="first">

        <div scale-up>I should have a delay of .5s</div>

        <div scale-up>I should have a delay of 1s</div>

      </section>

 

      <section id="second" layout horizontal>

        ...

      </section>

      

</core-animated-pages>

As far as I looked, there is no way to do that. I can set the delay with CoreStyle.g.transitions.scaleDelay. This would modify the delay but both animations would have the same value.

Another option would be to create a custom-scale-up.html file defining my own values.

Is there any other way. Something simple and declarative would be nice:  <div scale-up scale-up-delay=".5s"></div>

Thank you

[Yvonne Yip]

There is not a good way to do this currently. Can you file an issue in https://github.com/Polymer/core-animated-pages/issues to track this feature?

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/5bbb56dc-fb79-473d-9d2a-caac7ca8ad16%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[piturc...@gmail.com]

Thanks, I've did that: https://github.com/Polymer/core-animated-pages/issues/8

hero-transition.html does a little bit of JS magic. Finds the participating heroes and set up the transition according to their position and box size. Probably other animation could use that model:

Find all participating elements in transition

See if they have a scale-up-delay/duration attribute

Set up the transition accordingly

Not sure on how things work exactly and how to query elements with <core-style> type selectors as 

:host(.slide-up) ::content > * /deep/ [slide-up]

[piturc...@gmail.com]

In core-transition-pages.html I've set up a setUpDelay function that will query the scope for "delay" attribute and add at runtime a transition-delay based on that delay attribute value. This gets executed right after "go". Looks something like this:

  go: function(scope, options) {
    this.completed = false;
    if (this.activeClass) {
      scope.classList.add(this.activeClass);
    }
    scope.addEventListener('transitionend', this.boundCompleteFn, false);

   // Get and set delays
    this.setUpDelay(scope);
  },

  setUpDelay: function(scope) {
    var name = this.calcStyleName();
    var elements = scope.querySelectorAll('[' + name + '-delay]');
    var i = 0;
    var il = elements.length;
 
   for (; i < il; i += 1) {  
     var element = elements[i];
     var delay = element.getAttribute(name + '-delay');
     element.style['transition-delay'] = delay;
   }
  },

In markup it can be used like this:

<core-animated-pages transitions="slide-up">
 <section>
   <div slide-up slide-up-delay='.5s'></div>
 </section>
 <section>
  ...
 </section>
</core-animated-pages>

From a performance point of view this should not be ok as the code will just querySelector and set up style. Same thing can be done for other animation attributes such as easing or duration.

Would like to hear some code reviews, not sure that this is the polymer way of doing things.

Thanks