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

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

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

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

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

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


person manubot    schedule 27.10.2013    source источник
comment
Может это поможет вам blog-demo.appspot.com/#animation   -  person Mayank Pandya    schedule 27.10.2013
comment
Я боюсь, что вам нужно будет программно контролировать высоту в вашем приложении. Таким образом, всякий раз, когда вы добавляете или удаляете элемент с панели, вы вычисляете новую высоту и анимируете изменение размера. Для создания анимации вы можете использовать несколько фреймворков: GQuery, GWT Animation или HTML-переходы.   -  person fascynacja    schedule 28.10.2013
comment
и, кстати, вы можете проверить, как это делает твиттер. Просто откройте FireBug (или другой инструмент для веб-разработчиков) и посмотрите, что происходит с параметрами панели твиттера. Высота меняется? или у них есть другой трюк, чтобы сделать это?   -  person fascynacja    schedule 28.10.2013


Ответы (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);
}
person Manolo Carrasco Moñino    schedule 28.10.2013
comment
спасибо Токайо. Я понимаю основу вашего объяснения. Переопределение метода добавления выглядит для меня изящным решением. Я попробую позже на неделе. Я также рассмотрю возможность использования GQuery. Кстати, не кажется ли вам, что использование анимации GWT/GQuery менее эффективно для ЦП, чем переходы CSS? - person manubot; 28.10.2013
comment
конечно, это менее эффективно, но зависит от того, где находится узкое место. Если вы хотите анимировать что-то при обработке данных, не делайте этого, потому что анимация не будет плавной. Но нормально делать что-то типа твиттера не имеет значения. - person Manolo Carrasco Moñino; 28.10.2013
comment
понял, спасибо. Еще один дополнительный комментарий о вашем предложении использовать gquery. Если вы правильно поняли, gquery предоставляет два основных преимущества, помимо встроенных причудливых эффектов: 1) меньше строк кода, чем при использовании простого GWT. 2) Мне не нужно хранить экземпляры моих виджетов для доступа к ним. Это, я полагаю, уменьшает объем памяти клиента? (хотя я понятия не имею, как GWT переводит экземпляры в JS... может быть, он использует свою собственную структуру выбора CSS?). Я пропустил что-то еще? - person manubot; 28.10.2013