Question

我正在尝试使用jquery slideUp（）和slideDown（）为使用不同面板的面板交换设置动画。我已经尝试了一些东西，比如使用属性修饰符和带有prependJavascript和appendJavascript变体的AjaxLink但是我似乎无法让它工作。下面的代码是松散的意思我知道它不是100％语法正确。我把我的情况简化为一个简单的例子如下所示。

    Panel currentPanel = new Panel1("panelId");
    add(currentPanel );

    Link link = new Link("link")
    {
          public void onClick()
          {
              currentPanel = new Panel2("panelId")
              addOrReplace(currentPanel);
          }
    }
    link.add(new AttributeModifier("onclick", "$('#panel.getMarkup()').slideUp()");

我还研究了在http://wicketinaction.com/2013/02/replace-components-with-animation/找到的例子。我相信这个例子的问题是它是在支持模型改变后动画正在刷新或替换的组件的动画。我的情况有所不同，因为我正在用不同的组件更改整个组件。我还认为我需要设置我正在交换的组件来显示：none，因此slideDown（）将正常工作。

  public void onClick(AjaxRequestTarget target) {
       component.add(new DisplayNoneBehavior());

       target.prependJavaScript("notify|jQuery('#" + component.getMarkupId() + "').slideUp(1000, notify);");
       target.add(component);
       target.appendJavaScript("jQuery('#"+component.getMarkupId()+"').slideDown(1000);");
  }

  private static class DisplayNoneBehavior extends AttributeAppender {
         private DisplayNoneBehavior() {
              super("style", Model.of("display: none"));
         }

         @Override
         public boolean isTemporary(Component component) {
              return true;
         }
  }

感谢您提供高级帮助。如果有什么不清楚，请告诉我，我会尽力澄清。

Answer 1

浏览中的生命周期与您预期的不同。 jQuery slideUp（）生效，然后在幻灯片效果完成后调用notify函数作为回调。但是，wicket将所有javascripts作为AJAX从服务器发送到专业浏览器，因此它会在幻灯片生效完成之前更改组件（HTML标记）。

执行是

prependJavaScript - 它启动slideUp
渲染/替换组件
appendJavaScript - slideDown
致电'notify'

如果我理解您的示例，则notify不是JS函数。

所以你必须使用JS回调，所以按照以下顺序编写自己的JS事件：

调用slideUp
从slideUp
notify（）必须回调wicket AJAX
更换组件

有很多方法可以做到这一点。您可以尝试编写自己的AjaxEventBehavior来监听自定义事件，例如'afterSliding'

并通知来自$（'＃myid'）。触发器（'afterSliding'）;调用该行为。您的行为必须从onEvent（）方法替换组件，该方法是抽象的，您必须实现。

Wicket 6 - 如何在替换之前为要替换的组件设置动画

1 个答案: