Vaadin Animations, Fade out and hide with Valo theme

Question

I'm trying to fade away something from the screen, using:

comp.addStyleName("fade-out");

.fade-out {
    @include valo-animate-out-fade(2500ms, 1000ms);
}

But as soon as the animation ends, it's back on screen as before. Is there any way to get a callback when the animation is done, so I call remove it. Or maybe there is a way to do it in pure SCSS?

I also see that once the animation ran a can't run it again (by removing and adding back style). Is this expected behavior?

EDIT: The second issue was because I remove and add the styles in a listener one after the other. The client will not notice that anything changed, so will not animate. This is corrected by using server pushing, so the removal and new apply is in separate communications.

EDIT 2: Using push I can remove it by spawning a thread, sleeping for the time of the animation and removing. It works, but sounds really ugly. Any better way?

Answer 1

My answer will not deal much about animations in Valo theme but presents a more generic way to deal with JavaScript stuff in Vaadin and includes an option to callback functions in the server side. It requires jQuery but possibly this can be done without it also.

See below example class having callback function on the server side

@SuppressWarnings("serial")
public class AfterFadeCallback implements com.vaadin.ui.JavaScriptFunction {
   @Override
   public void call(JsonArray arguments) {
      Notification.show("Faded!");                  
   }
}

Below is a simple example how to add jQuery library to Vaadin UI and howto call above callback function from client side JavaScript after animation is completed

// jsquery.js is copied to resource directory
// "VAADIN/scripts" (Maven Eclipse project src/main/webapp/VAADIN/scripts )
@com.vaadin.annotations.JavaScript({"vaadin://scripts/jquery.js"})
public class TestUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      com.vaadin.ui.JavaScript cjs = com.vaadin.ui.JavaScript.getCurrent();
      Button fadeButton = new Button("FADE");
      // need an id for js to find
      fadeButton.setId("fadeButton");
      // add Vaadin JavaScriptFunction to document 
      cjs.addFunction("org.example.javascript.AfterFadeCallback"
                           ,new AfterFadeCallback());
      fadeButton.addClickListener( click -> {
         // complete defines the callback function after animation
         // which is the one we added above
         // of course it can be any js stuff
         cjs.execute("$('#fadeButton').animate({opacity: '0.1'},"
                    +" {duration: 1500, complete: function() { "
                         +" org.example.javascript.AfterFadeCallback() } } );");
      });      
      setContent(fadeButton);
   }

...

}