Hello, as described in the title i have made the example you can find below.
When i click on the toggle button, i would like the two layouts to be switched with eachother, i.e. the one showing will fade out, and the one hidden will fade in.
However, when i do this, both become half-size (because they both are members of the layout i assume), do the animation, then the showing layout will become full screen again.
Is there a way to properly fade-animate between these two full-screen layouts?
When i click on the toggle button, i would like the two layouts to be switched with eachother, i.e. the one showing will fade out, and the one hidden will fade in.
However, when i do this, both become half-size (because they both are members of the layout i assume), do the animation, then the showing layout will become full screen again.
Is there a way to properly fade-animate between these two full-screen layouts?
Code:
public void onModuleLoad() {
Layout main = new VLayout();
main.setMembersMargin(30);
main.setMargin(20);
main.setWidth100().setHeight100();
Layout one = createLayout("blue");
Layout two = createLayout("red");
two.setVisibility(Visibility.HIDDEN);
IButton toggle = new IButton("Switch");
toggle.addClickHandler(clickEvent -> {
if (one.isVisible()) {
one.animateHide();
two.animateShow();
} else {
two.animateHide();
one.animateShow();
}
});
main.addMember(toggle);
main.addMember(one);
main.addMember(two);
main.draw();
}
private Layout createLayout(String bg){
Layout layout = new VLayout();
layout.setWidth100().setHeight100();
layout.setBackgroundColor(bg);
layout.setBorder("2px solid black");
layout.setAnimateHideEffect(AnimationEffect.FADE).setAnimateShowEffect(AnimationEffect.FADE);
layout.setAnimateShowTime(400).setAnimateHideTime(400);
return layout;
}
Comment