2

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

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

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

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

PS。我想要实现的一个很好的例子是当一个人点击一个 twit 时 twitter 处理面板高度的转换的方式。

4

1 回答 1

2

只有将高度设置为固定值时，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);
}
于 2013-10-28T08:56:20.177 回答