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