openui5: How to implement animation only for the first render of custom component

Question

I'm implementing some custom components for openui5/sapui5.

For the component, I want to have a css animation when it is initially loaded. This is quite straight forward as I add the following css:

@-webkit-keyframes card-in-animation {
   from {
     -webkit-transform: translateY(50em) rotate(5deg);
     opacity:0;
   }
}

.card {
   animation:card-in-animation  0.7s .2s ease-out both;
   -webkit-animation:card-in-animation  0.7s .2s ease-out both;
}

The problem arises when the component is re-rendered for some reason by the openui5 framework.

The DOM elements are then destroyed and new ones are created. This causes the animation to triggered once again.

To see this in practice:

1. Go to http://elsewhat.github.io/openui5-cards/cdn/latest/example3.html
2. The initial animation is triggered as wanted
3. Click on the menu icon in the top right corner of any card
4. A new unwanted animation is triggered

What's the preferred method of avoiding this in openui5?

Answer 1

Inside of your renderer you can set an flag that this control/component is rendered once. second time you'll run into this renderer you'll check this flag and doesn't render this specific class.

if(!oControl._renderedOnce)  {
  oRm.addClass('rotate');
  oControl._renderedOnce = true;
}

oRm.writeClasses();

Answer 2

Not sure how to overcome the unwanted re-rendering, but would it be an option to remove the animation class after the cards are rendered? (You may need to trigger it after a few seconds after onLoad for all cards to be set in place)

Something like this:

$("<element_of_your_cards>").removeClass("card")