Transitions Effects in Vaadin 7

In Vaadin 6 i used the “animator” add-on to achieve some basic effects (update: now also available for vaadin7 with slight API changes). The add-on worked great, although some users claimed that it felt a bit sluggish. Is the add-on still the recommended way to achieve transition effects in Vaadin 7?

Anyhow, the reason i’m asking is that in the Vaadin7 Dashboard sample app, the effects are not done via the add-on, but directly via CSS. I tried to copy the techniques used, but i couldn’t quite make it work yet in my own project for the following use cases:

  1. view navigation (old view slides out, new view slides in)
  2. showing/closing of a (sub)window.

Any pointers are appreciated. Many thanks in advance.

What Transition effects do you mean. I just had a quick look at the Demo and couldn’t find a single transition.
Also: Have a look at this thread and the suggested add-ons:
Image Slideshow


The dashboard demo
uses a bunch of them. Since you said you can’t see it, maybe you’re using IE?

  1. When you first visit the link, the login screen will show up with a small “move-up” transition. (that’s what it’s called in the scss)
  2. In that same login screen, there’s a text panel (“welcome to the dashboard demo application, this application is not real, etc”) with a “fade-in” transition.
  3. After logging in, the left panel (with the big buttons) will “slide in” from the left.
  4. In the first “page” (dashboard), if you click on the little gears icon (“configure”) on the panels, it will show a semitransparent notification window that will fade-out after a while.

Thank you for the suggestion, but i’m not trying to build an image slideshow component. As i wrote in my original post, I’m looking for the best way to to add transition effects/animations to View switching (in Navigator) and showing/hiding of subwindows.

I was look for transition like in the ImageCarousel add-on in the thread but you also meant things like fading.
You could try looking at the actual source code of the demo to see how they did it.
Another interesting add-on for that purpose would be
FancyLayout
.