Question

我试图通过以下方式淡出屏幕上的内容：

comp.addStyleName("fade-out");

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

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

我也看到，一旦动画运行，就可以再次运行它（通过删除和添加后退样式）。这是预期的行为吗？

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

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

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

...

}

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只会将更改传达给客户端。由于您在同一个侦听器调用中删除并添加了样式，因此没有更改进行通信（即，不会告诉浏览器该样式已被删除并再次添加，因此它不会重置动画）。

动画完成后有没有办法获得回调，所以我调用删除它。或者也许有一种方法可以在纯SCSS中实现它？

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

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

2 个答案: