Vaadin animator fades in goes away on refresh

Question

I am using Vaadin Animator 2.0.0 add on to fade-in the component. I am using following code

new Dom(referenceLayout).getStyle().opacity(0);
Animator.animate(referenceLayout, new Css().opacity(1.0)).delay(100).duration(2000);

it works fine, but if I refresh the page, I understand the second line (Animator) doesn't kick in and by default, the component remains with 0 opacity and I dont see anything. What can I do to make sure the component remains visible even after the refresh. I dont care if the animator kicks in after refresh or not.

Answer 1

If you just want a simple fade-in animation for a component, you can do the following (assuming you are using/extending the Valo theme):

Your app:

mycomponent.addStyleName("fade-in");

Your theme:

.fade-in {
  @include valo-animate-in-fade;
}

For further documentation about the animation mixins in the Valo theme, see the documentation at https://vaadin.com/api/valo/#animation