In core-transition-pages.html
<https://github.com/Polymer/core-animated-pages/blob/master/transitions/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
On Saturday, July 12, 2014 12:25:32 AM UTC+3, [email protected] wrote:
>
> 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]
>
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/7b967ce4-7153-4dc6-a434-b299b0243e89%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
