Transitions in Vaadin 7


Hello how’s it going

First tell them that I am beginner in vaadin framework and I’m trying to add a transition effect (as can be fade-in, flip, etc.) between two layout, and can not find some method or addon that allows me to do this.

If they were so kind to help me with this thank you very much

Hi Rolando!

The Animator add-on is one suitable candidate that you should take a look at. I’m currently in the process of releasing version 2.0 of it, with a new API for Vaadin 7 and animations that utilize CSS rather than JavaScript, so you might want to keep an eye on the
Animator GitHub repository
.

Another great option that comes to mind is
FancyLayouts
. I haven’t used that myself, but it’s made by one my brilliant colleagues here at Vaadin.

Hope these get you started, and be sure to ask more if you need any help!

Thank you very much for the response Jouni
regards

Is the Animator addon still maintained? I can’t find any working demo and the code on Git does not include much of an example. There are only 2 lines of sample code on the addon page but I can’t tell what they do.

I have a verticalLayout where one of the components in the middle can be expanded/collapsed (I do that by switching visiblity on/off). I want to animate the expansion/collapse of the component.

I tried to add this to my theme:

.v-slot-optional-component {
        @include animation(valo-animate-in-slide-down 800ms 10ms backwards);
    }

That kinda worked when expanding but the slide down effect begins from the top of the page rather than from the previous component of the verticalLayout. Also, I can’t figure out how to add the reverse “collpase” effect.

Any suggestions on how to go about achieving this?