How to add Css3 Animation in Vaadin Window?

Vaadin 6 / 7 / 8 Framework UI
1

Hi, how can i add css3 animation in Window. i mean i tried with css. but animation not working in window level. only working in layout or or component level.

2

I don’t see why using a Window should make any difference here. Especially because Windows are essentially just Panels with some css to make them behave different.
Could you show us what kind of css you’re using and how you’re using it in the window.
I had a quick test and everything seemed working fine.

3

First code is UI. and second one css. only i can see red background color in window from css. but no animation.

    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
       
        final Window w = new Window("My window");
        w.setClosable(true);
        w.setStyleName("windowAnimate");
        Button button = new Button("Show Window");

        button.addClickListener(new Button.ClickListener() {
            @Override
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
                UI.getCurrent().addWindow(w);
            }
        });

        layout.addComponent(button);
        setContent(layout);

    }


// CSS is below:in the vaadin/theme/mytheme.scss file


//css
@mixin mytheme {
  @include valo;

  // Insert your own theme rules here
  
  .windowAnimate{
      background-color: #ccffff;
    -webkit-animation-name: example; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: example;
   // animation-duration: 4s;
  }
  
  /* Chrome, Safari, Opera */
@-webkit-keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}
}
4

Try putting the classes and keyframes outside the mixin, see if it works. It might be that the mixin gets an additional selector(s), which does not match the content in the winow, as it is attached as an overlay.

5

Thank you very much Michael Tzukanov. :slight_smile: it works.

6

But one more thing is it possible to do animation again when usr press the cross button (X) of the window. my window is Autoclosable. thats why i implemented a closeListener and i tried to reset the style with new animation. but closeListener get called after the window closing. so animation doesnt hook up.

7

the following code i added,

 w.addCloseListener(new Window.CloseListener() {

            @Override
            public void windowClose(Window.CloseEvent e) {
                        w.setStyleName("anotheranimation");

            }
        });
8

Maybe overriding Window.close() might work for you
https://vaadin.com/forum#!/thread/7710916

There you can set your stylename.
The problem you are probably going to run into is: As soon as you set the style the animation will start but if you call super.close() right after setStyleName the animation will have no time to play. You would have to wait for the animation to finish before closing the window. I actually made a small Javascript Extension that does exactly that: When an animation is finished it will send an RPC to the server-side and will fire an AnimationFinishedListener that you can attach in your Vaadin server-side.
Code can be found here:

https://vaadin.com/forum#!/thread/10177297/10188696

You just have to copy the code, add a jQuery jar to the same package and mention said jar in the AnimationFinishedExtension @Javascript annotation.