Vaadin Animations，使用 Valo 主题淡出和隐藏答案

【问题标题】：Vaadin Animations, Fade out and hide with Valo themeVaadin Animations，使用 Valo 主题淡出和隐藏
【发布时间】：2018-06-06 22:40:11
【问题描述】：

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

comp.addStyleName("fade-out");

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

但动画一结束，它就会像以前一样回到屏幕上。动画完成后有没有办法获得回调，所以我调用它删除它。或者也许有办法在纯 SCSS 中做到这一点？

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

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

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

【问题讨论】：

你能粘贴你实际使用这种风格的代码吗？由addStyleName() 左右？
是的，addStyleName("fade-out")。
它是否必须完全是带有样式的“Valo 动画”？我之前曾遇到过类似的问题，但最终得到了不同的解决方案。
@pirho 是 Animator 插件吗？我知道它可以工作，但是一旦我调用了动画，该组件就无法再用其他东西制作动画了。（或者也许我没有正确使用它？可能是。）无论如何，这是内置在主题中的，应该像预期的那样工作，不是吗？
也许应该，但我无法在没有重置和锁定的情况下使用addStyleName()。但我还有一些我已经在工作的东西。不确定我是否可以为其添加回调。如果我记得正确的话，它也涉及jQuery...

标签： java css animation vaadin

【解决方案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);
   }

...

}

【讨论】：

像魅力一样工作！除非使用推送，否则回调中的通知不会显示。
@MouseEvent 很高兴知道。我想我没有添加@Push，但猜想如果使用它不会有害（需要检查并更新该部分的答案）

【解决方案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 的回答。

【讨论】：