General problem with "appearing" effects

[Itzik Yatom]

Hi all,

I develop Web application with GWT and use GWT-FX for any kind of
animation.

I have a general problem with effects that make widget to appear such
as Show (or reverse Fade), SlideDown etc.

The problem is that I can't manage to run the effect without the
widget to appear for a moment before the effect is starting. For
example when I use the SlideDown effect the flow is - Widget appears
for a short moment and than the effect is running as expected.

My code snippet for that is

@UiField protected NEffectPanel expander;

expander.setWidget(aWidget);
expander.addEffect(new SlideDown());
expander.setEffectsLength(0.5);
expander.playEffects(0.0,1.0);

I use UiBinder for a static effect panel positioning but I have the
same problem without it

Thanks
Itzik

[Itzik Yatom]

After some effort, I have developed the perfect Slide down / Slide up
effects:

The UI binder file:

<fx:NEffectPanel ui:field="expander">
<fx:NEffectPanel styleName="wiped-up" ui:field="innerExpander"/>
</fx:NEffectPanel>

The objects:

@UiField protected NEffectPanel expander;
@UiField protected NEffectPanel innerExpander;
protected final NMorphStyle myWipeDown = new NMorphStyle(new
Selector(".wiped-up"), new Selector(".wiped-down"));

the Slide down

innerExpander.setWidget(aWidget);
innerExpander.addEffect(new SlideDown());
innerExpander.setEffectsLength(0.5);

expander.addEffect(myWipeDown);
expander.setEffectsLength(0.5);

innerExpander.playEffects(0.0,1.0);
expander.playEffects(0.0,1.0);

The slide up:

innerExpander.playEffects(1.0,0.0);
expander.playEffects(1.0,0.0);

The CSS:

.wiped-up {
overflow: hidden;
height: 0px;
}

.wiped-down {
overflow: hidden;
height: 350px;
}

1. The external "wipe down" panel is needed for expanding / collapsing
the blank area that spans as the widget height
2. The inner effect panel must be styled initialy as wiped-up
otherwise there is a short blink at the effect play start.
3. A small improvement will be to get dynamically the inner widget
height (not always 350px).

Itzik