CSS Animations in Vaadin

Hi,

I’m trying to add some CSS Animations to a project, I found the Animator Add-on but I’m not sure if this is still active and alive. Last update was a year ago.
I searched the forums and documentation, but I don’t find very much information and examples. Only some old code and some open questions. I tried some of the examples, unfortunatley without success.

So after two days of searching I’m asking here: Who is using CSS animations, who can give me working examples? How can I start an animation by clicking on an object? Is there any documentation I haven’t seen?

Thanks for any help
Klaus

Instead of using the Animator Add-On you could just create styles which define normal css animation or Valo Animations (
https://vaadin.com/api/valo/#animation
).
So you can define a style like:

.someStyle{
  @include animation(valo-animate-in-slide-down 0.7s 0s backwards)
}

and as soon as you set or add the style to your component it will slide down for 0.7 seconds after a 0s delay.
If the component is not rendered yet the animation will play as soon as it is so adding the style before the component is added to layout will cause the animation to be played as the component is rendered (thus making a component fade in for example if a style is attached with said animation).
Removing or replacing a style won’t retrigger the animation so you shouldn’t run into problems using it.

Also have a look at the css properties transition and animation.

I unfortunately can’t provide an example as the animations in my current project are too big and complex to be easily understandable. If my explanation doesn’t help though i could create a small working example with minimal code if needed.

Is there any possible way to capture the animation end ? i.e i want to navigate to another page after the end of the animation. is there any hack to do that ?

Only using css it’s not possible but you could run a Thread which runs as long as you set the animation to run.

Another way would be to write a small Javascript Extension. This extension could either be one that wraps the jQuery.animate() method so that you can dynamically run animation from the server side without having to define css styles…
…or you could use css styles containing (valo-)animations and listen on the client-side for the animation finished event.
I actually already made a simple version of the latter.
The server side extension class (called AnimationFinishedExtension) looks like this:

[code]
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractClientConnector;
import com.vaadin.server.AbstractJavaScriptExtension;

@JavaScript({“animfinished_connector.js”,“jquery-1.11.2.min.js”})
public class AnimationFinishedExtension extends AbstractJavaScriptExtension {
@Override
public void extend(AbstractClientConnector target) {
super.extend(target);

    registerRpc(new AnimFinishedRPC() {
        
        @Override
        public void animationFinished() {
            fireAnimFinished();
        }
    });
}

List<AnimFinishedListener> listeners = new ArrayList<AnimFinishedListener>();

public void addAnimFinishedListener(AnimFinishedListener listener){
    listeners.add(listener);
}

public void removeAnimFinishedListener(AnimFinishedListener listener){
    listeners.remove(listener);
}

public void fireAnimFinished(){
    for (Iterator it_listener = listeners.iterator(); it_listener.hasNext();) {
        AnimFinishedListener listener = (AnimFinishedListener) it_listener.next();
        listener.animationFinished();
    }
}

public interface AnimFinishedListener{
    public void animationFinished();
}

}
[/code](It requires jQuery. So just put you jquery js in the same package and modify the @Javascript annotation accordingly to fit the filename of your jquery.js)

The RPC interface (called AnimFinishedRPC) is just:

[code]
import com.vaadin.shared.communication.ServerRpc;

public interface AnimFinishedRPC extends ServerRpc {
public void animationFinished();
}
[/code]and the animfinished_connector.js looks like:

[code]
window.path_to_your_package_AnimationFinishedExtension = function(){

var rpcProxy = this.getRpcProxy();

var el = this.getElement(this.getParentId());
$(el).bind('oanimationend animationend webkitAnimationEnd', function() {
    rpcProxy.animationFinished();
});

}
[/code](You need to change path_to_your_package in the connector.js to match the package you put it in, e.g. com_example_AnimationFinishedExtension if the server-side class is in com.example.AnimationFinishedExtension)

So put all of them in the same package (doesn’t need to be a client package and so doesn’t has to be “widgetset-compiled”) and then use it like:

AnimationFinishedExtension animFinExt = new AnimationFinishedExtension();
animFinExt.extend(button); //For example a button
animFinExt.addAnimFinishedListener(new AnimFinishedListener(){....}); //do your navigation or whatever in the public void animationFinished() inside the listener

Thanks, that helped :slight_smile:

I now made a simple application for testing, I can start an animation with a click:

public void click(com.vaadin.event.MouseEvents.ClickEvent event) { content.setStyleName( "animate" ); } In the scss I have:

.animate{ @include animation(valo-animate-in-slide-down 1s 0s backwards) } Works fine for a simple predefined animation.
Now I add in the css:

[code]
.animate2{
@include animation(simplemove 1s 0s)
}

@include keyframes(simplemove) {
  0% { transform: translateY(-100%); } 
  100% { transform: translateY(100%); } 
}

[/code]This should make a simple move of the ‘content’ element - but nothing happens. What’s wrong here?

I did a little bit of testing and i think translateY might not work with keyframes. I don’t know it for sure as i personally don’t use keyframes that much. I could get it work with changing the color though like this:

@-webkit-keyframes simplecolor { from {color: yellow;} to { color: red;} } @keyframes simplecolor { from {color: yellow;} to { color: red;} } The keyframes need to be declared above @mixin yourtheme. from and to can also be 0% and 100%
I used it like:

.animate2{ @include animation(simplecolor 5s 0s) } and it worked like a charm. Maybe you can do what you try to achieve using top, bottom, … or using margins, padding, …
There could also be something wrong syntax-wise and translate works fine but as i said i don’t know enough about css to answer that question unfortunately.

Update: So a second after posting this i had a last quick check and found out that translateY defined like:

[code]
@-webkit-keyframes simplemove {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}

@keyframes simplemove {
0% { transform: translateY(-100%); }
100% { transform: translateY(100%); }
}
[/code]works fine in my Firefox 30.0 but not at all in my both chromes so it seems like it has to do with the browser compatibility of translateY I guess.

Declaring above
@mixin
was a great tipp, thanks. Animations are working now, I also tried CSS3 animations like
rotate3d
- no problem :slight_smile:
Now I begin to understand how the animations on the Vaadin sampler are working - a combination of color change, rotate, scale and more…

But I don’t understand the way the animation effect with the menu - it’s a kind of ‘Door open’/‘Door close’ with the menu and width change at the same time. And I can’t change width and height on the keyframes, I need a combination of transition and translate. I’m still searching, anybody have done that?

Not sure how helpful it is but here is an example for a book-like html/css script which has a similar looking effect on hover though it’s a bit more complex then the one which can be seen in the Vaadin sampler as there are more “pages”.

http://codepen.io/fivera/pen/rHigj