java - Vaadin 动画，使用 Valo 主题淡出和隐藏

Question

我正试图从屏幕上淡出一些东西，使用:

comp.addStyleName("fade-out");

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

但是一旦动画结束，它就会像以前一样回到屏幕上。有没有办法在动画完成时得到回调，所以我调用 remove 。或者也许有一种方法可以在纯 SCSS 中做到这一点？

我还看到动画一旦运行就无法再次运行(通过删除和添加后退样式)。这是预期的行为吗？

编辑:第二个问题是因为我在一个监听器中一个接一个地删除和添加样式。客户端不会注意到任何更改，因此不会设置动画。这已通过使用服务器推送得到纠正，因此删除和新应用是在单独的通信中进行的。

编辑 2:使用 push 我可以通过生成一个线程来删除它，在动画时间 hibernate 并删除。它有效，但听起来真的很难看。有什么更好的方法吗？

Answer 1

我的回答不会过多涉及 Valo 主题中的动画，而是提供一种更通用的方式来处理 JavaScript stuff in Vaadin并包括在服务器端回调函数的选项。它需要 jQuery但可能这也可以在没有它的情况下完成。

请看下面在服务器端有回调函数的示例类

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

下面是一个简单的示例，如何将 jQuery 库添加到 Vaadin UI 以及如何在动画完成后从客户端 JavaScript 调用上述回调函数

// 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);
   }

...

}