CODEWITHSUNDEEP
gwtpanel
Issam
Issam

Reputation: 31

Hide/Show animation

I would like to know if it is possible to make an animation on hide/show panel with simple gwt (without additonnal librairies).

Any suggestions are welcome.

Thanks

Upvotes: 3

Views: 5136

Answers (2)

Ilia Akhmadullin
Ilia Akhmadullin

Reputation: 1573

Maybe you will find this code useful from NotificationMole: 

private class MoleAnimation extends Animation {
    private int endSize;
    private int startSize;

    @Override
    protected void onComplete() {
      if (endSize == 0) {
        borderElement.getStyle().setDisplay(Display.NONE);
        return;
      }
      borderElement.getStyle().setHeight(endSize, Unit.PX);
    }

    @Override
    protected void onUpdate(double progress) {
      double delta = (endSize - startSize) * progress;
      double newSize = startSize + delta;
      borderElement.getStyle().setHeight(newSize, Unit.PX);
    }

    void animateMole(int startSize, int endSize, int duration) {
      this.startSize = startSize;
      this.endSize = endSize;
      if (duration == 0) {
        onComplete();
        return;
      }
      run(duration);
    }
  }

Usage:

  • to hide panel:

    animation.animateMole(heightMeasure.getOffsetHeight(), 0, animationDuration);

  • to show:

    borderElement.getStyle().setDisplay(Display.BLOCK);
    animation.animateMole(0, heightMeasure.getOffsetHeight(), animationDuration);

Where borderElement - container DivElement and heightMeasure - inner DivElement.

Upvotes: 3

Hilbrand Bouwkamp
Hilbrand Bouwkamp

Reputation: 13519

GWT's Layout classes support animation. Check out Layout, DockLayout en SplitLayout. Furthermore, there is an Animation class, which is used in several panels for using animation to show/hide the content. Simply check the classes using the Animation class.

Upvotes: 3

Related Questions