I have been playing around with some of the trasitions provided in the Dashboard example.
If I add a CSS class to a component (such as move-up-100) and then add the component to a layout, the component appears and motions upward as expected.
My question is this, is there a way to perform another
.addStyleName (such as move-down-100) to an already visible component and somehow wait for that transition to complete before removing it from the container. What I am seeing is that the remove action happens very quickly, thus not letting the CSS transition to complete. I’m trying to create a entrance and exit feels for components based on various events (such as a button click)
I think that I could accomplish this via the Animator plug-in, but I am hoping to be able to do via all via CSS.
In order to remove things from the dom after an animation/transition, you will need to either perform the actual removal of the element using a delay or by listening to animationEnd or transitionEnd events (which are currently vendor prefixed, so you will need to listen to different events in different browsers).
I’m currently building the next version of the Animator add-on (2.0), which does animations using CSS Transitions and Animations. You can listen to animation end events using that, and remove a component after the animation.
It’s not 100% beta ready, but I’d say it’s 90% ready, and I encourage you to try it out. You can download the sources from the
GitHub repo . You can package that as a JAR add-on, or use the source files directly in your own project.
Had the same question and ran in to a problem, which I solved so thought I’ll post it here in case anyone hits this.
Specifically I suspect this is to do with the fact I’m using Gradle with the Vaadin Plugin from https://github.com/johndevs/gradle-vaadin-plugin and was getting an error compiling the widget set for the dom add on. The solution is simply to set the vaadin version explicitly, e.g:
vaadin {
vaadin.version "7.6.1"
widgetset "mywidgetset"
}
The plugin claims to use the “latest” by default, but it seemed to be using 7.5.10.