Vaadin动画,淡出并隐藏Valo主题

Question

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

comp.addStyleName("fade-out");

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

但是一旦动画结束,它就像以前一样回到屏幕上.动画完成后有没有办法获得回调,所以我打电话将其删除.或者也许有一种方法可以在纯SCSS中做到这一点？

我也看到,一旦动画运行了,就无法再次运行它(通过删除和添加返回样式).这是预期的行为吗？

编辑:第二个问题是因为我一个接一个地删除和添加侦听器中的样式.客户端不会注意到任何变化,因此不会动画.这可以通过使用服务器推送来纠正,因此删除和新应用是在单独的通信中.

编辑2:使用push我可以通过生成一个线程来移除它,在动画的时候睡觉并删除.它有效,但听起来真的很难看.有更好的方法吗？

Answer 1

我的回答不会过多涉及 Valo 主题中的动画，而是提供了一种更通用的方法来处理Vaadin 中的 JavaScript 内容，并包含服务器端回调函数的选项。它需要jQuery，但也许没有它也可以完成。

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

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

下面是一个简单的示例，如何将 jQuery 库添加到 VaadinUI以及如何在动画完成后从客户端 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);
   }

...

}

Answer 2

但一旦动画结束，它就会像以前一样回到屏幕上

.fade-out {
    @include animation(valo-animate-out-fade 2500ms 500ms forwards);
}

forwards指定目标将保留执行期间遇到的最后一个关键帧设置的计算值[ 1 ]。另请注意，我没有valo-animate-out-fade直接包含，因为后者定义为：

@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
  @include animation(valo-animate-out-fade $duration $delay backwards);
}

我还看到，一旦动画运行，就无法再次运行它（通过删除并添加回样式）。这是预期的行为吗？

是的。请记住，Vaadin 仅将更改传达给客户端。由于您在同一个侦听器调用中删除和添加样式，因此没有任何通信更改（即浏览器不会被告知样式已被删除并再次添加，然后它不会重置动画）。

有什么办法可以在动画完成时获得回调，所以我调用remove它。或者也许有一种方法可以在纯 SCSS 中做到这一点？

您无法仅使用 CSS 从 DOM 中删除该组件（尽管如果您指定动画向前填充，它将保持隐藏状态）。[ 2 ]中还有一种使用 Javascript 扩展的方法，这与 @pirho 的回答类似。