Как добиться плавного перехода высоты при добавлении новых элементов в панель в GWT?

Question

У меня есть FocusPanel, что при нажатии на него добавляются новые Элементы/Виджеты, которые увеличивают его высоту. Обратите внимание, что нет явного изменения высоты в css FocusPanel, высота просто увеличивается в результате добавления новых элементов внутри панели

Я бы хотел, чтобы увеличение высоты происходило через плавный переход, но я я не уверен, как его достичь.

Я попытался применить css transition: height 2s; к FocusPanel, а также ко всем другим элементам/виджетам, которые я добавляю к нему. Но, похоже, это не работает, переход вообще отсутствует. Я предполагаю, что это связано с тем, что высота не увеличивается из-за того, что я меняю свойство css, а просто добавляю больше элементов в контейнер.

Каков правильный способ добиться плавного перехода высоты при добавлении новых элементов в панель? Благодаря!

PS. Хорошим примером того, что я хотел бы достичь, является способ, которым twitter обрабатывает переход высоты панели, когда вы нажимаете на twit.

Answer 1

CSS-анимация работает только в том случае, если вы задали высоту фиксированным значениям.

Способ создания собственной реализации панели и переопределения метода добавления, так как он заботится о вычислении высоты и настройке до и после времени анимации.

Как @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); 
}