CODEWITHSUNDEEP
event-handlingpolymerpolymer-1.0
John Archer
John Archer

Reputation: 105

polymer 1.0 event when element appears on page

I can't understand how to make css animations to an element no sooner than it appears on page, like css3 transform rotate. when I set in attached(){performRotation()} when the element appears on page it's already rotated. I couldn't find in all documentation which event I need to subscribe to in order to start animation.

Upvotes: 1

Views: 381

Answers (1)

Walid Ammar
Walid Ammar

Reputation: 4128

You can do that with the help of NeonAnimatableBehavior and NeonAnimationRunnerBehavior, you may configure your animations in animationConfig property and then play them with playAnimation('name') function which is implemented by NeonAnimationRunnerBehavior .

Please check lifecycle callbacks and neon-animation demos.

behaviors: [
  Polymer.NeonAnimatableBehavior,
  Polymer.NeonAnimationRunnerBehavior
],

properties: {
  animationConfig: { ... },
}

...

ready: function() {
  this.playAnimation('entry');
}

I've made you a simple example using the above elements to give you a quick start.

Update

You can modify each configured animation based on given properties in one of the lifecycle callbacks, e.g. ready callback:

var entryAnimation = this.animationConfig.entry[0];
entryAnimation.transformFrom = this.doSomethingTo(this.someProperty);

Please check the updated demo.

Upvotes: 2

Related Questions