Vaadin动画，使用Valo主题实现淡出和隐藏

Question

我正在尝试通过以下代码从屏幕上淡出某些内容：

comp.addStyleName("fade-out");

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

但是一旦动画结束，它会像以前一样出现在屏幕上。有没有办法在动画完成时获取回调，以便我调用remove方法将其移除？或者也许有一种纯SCSS的方法可以实现？

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

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

编辑2：使用推送，我可以通过生成一个线程，在动画时间内休眠并删除来移除它。它可以工作，但听起来很丑陋。有更好的方法吗？

- Mordechai

---

你能贴出你实际使用这个样式的代码吗？是通过 addStyleName() 还是其他方式？ - pirho

是的，addStyleName("fade-out")。 - Mordechai

它必须准确地设置为“Valo动画”样式吗？我之前也遇到过类似的问题，最终采用了不同的解决方案。 - pirho

@pirho 是动画师插件吗？我知道它可以工作，但是一旦我调用了一个动画，组件就无法再与其他东西一起进行动画了。（或许是我使用不正确？可能是。）无论如何，这已经内置在主题中，应该按预期工作，对吧？ - Mordechai

也许应该这样做，但我无法使用addStyleName()进行重置和锁定。但是我已经有其他东西可以工作了。不确定是否可以向其中添加回调。如果我记得正确，它还涉及到jQuery... - pirho

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库添加到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);
   }

...

}

- pirho

---

非常好用！除非使用推送，否则回调中的通知不会显示。 - Mordechai

@MouseEvent 很好知道。我想我没有添加 @Push，但是如果使用它不会有任何问题（需要检查和更新答案）。 - pirho

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的答案类似。

- Javier