在 GWT 中向 Panel 添加新元素时如何实现平滑的高度过渡？

Question

我有一个 FocusPanel，当点击它时，它会向自身添加新的元素/小部件，使其高度增加。请注意，FocusPanel 的 css 中的高度没有显式变化，高度只是在面板内添加新元素后增加

我希望通过平稳过渡来增加高度，但我不确定如何实现。

我尝试将 css transition: height 2s; 应用于 FocusPanel 以及我添加到其中的所有其他元素/小部件。但这似乎不起作用，根本没有过渡。我认为这是因为高度不会因为我更改 css 属性而增加，而是通过向容器添加更多元素。

以编程方式向面板添加新元素时，实现高度平滑过渡的正确方法是什么？谢谢！

附言。我想要实现的一个很好的例子是 twitter 在单击 twit 时处理面板高度转换的方式。

Answer 1

CSS 动画只有在将高度设置为固定值时才有效。

一种方法是创建您自己的面板实现，并覆盖 add 方法，以便它负责计算高度并在动画时间之前和之后设置它。

正如@fascynacja 在其评论中指出的那样，由于不同的原因，我会选择gwtquery 来做这件事，但主要的一个原因是它是一个用 gwt 开发的轻量级库，它允许你用很少的东西做很多事情代码行。

这里有一个使用 gquery 动画执行所需操作的面板示例。

import static com.google.gwt.query.client.GQuery.*;
[...]

// Create your own implementation of a panel
public static class MyFlowPanel extends FlowPanel {

  // The GQuery object for this panel
  GQuery $this = $(this);

  // Override the add method so as each time it is called, we run an animation
  // You can do the same with the remove method.
  @Override
  public void add(Widget w) {
    // Compute the actual height
    int hInitial = $this.height();
    // Set height to auto before adding the new child.
    $this.height("auto");
    // Add the new widget to panel
    super.add(w);
    // Compute the new height
    int hFinal = $this.height();

    // Use Gquery to .animate the panel from the old to the new height
    // You could replace this with css3 transitions
    $this.height(hInitial)
         .stop(true)
         .animate("height: " + hFinal, 2000);
  };
};

public void onModuleLoad() {
  // Create your panel, and use it as usual in GWT
  final FlowPanel myFlowPanel = new MyFlowPanel();
  RootPanel.get().add(myFlowPanel);
  // Set some css properties to your panel. You could set these in your style-sheet.
  $(myFlowPanel).css($$("border: 1px solid grey; border-radius: 8px; background: #F5FFFA; width: 500px; padding: 8px"));

  // Add 10 labels to the panel in periodes of 1000 ms
  Scheduler.get().scheduleFixedPeriod(new RepeatingCommand() {
    int c = 10;
    public boolean execute() {
      if (c-- > 0) {
        myFlowPanel.add(new Label(c + " Lorem ipsum dolor sit amet, consectetur adipiscing elit."));
        return true;
      }
      return false;
    }
  }, 1000);
}