代码之家 › 专栏 › 技术社区 › Mordechai

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

vaadin animation css java

Mordechai · 技术社区 · 7 年前

我正在尝试使用以下方法从屏幕上淡出一些内容:

comp.addStyleName("fade-out");

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

但动画一结束,它就会像以前一样回到屏幕上。动画完成后,是否有任何方法可以获得回调,因此我调用remove it。或者也许有一种方法可以在纯SCS中实现?

我还看到,一旦动画运行了,就不能再运行它(通过删除和添加回样式)。这是预期的行为吗?

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

编辑2:使用push,我可以通过生成线程、在动画播放时休眠并删除来删除它。这很管用,但听起来很难看。还有更好的方法吗?

2 回复 | 直到 7 年前

pirho 7 年前

我的回答不会涉及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);
   }

...

}

Javier user3138333 7 年前

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

.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 it。或者也许有一种方法可以在纯SCS中实现?

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