Animaciones con Valo en Layouts

Other Languages Discusión en español (Discussion in Spanish)
1

Buenas,

Estoy intentando utilizar una animación slide-down (
https://vaadin.com/api/valo/#mixin-valo-animate-in-slide-down
 ) para
HorizontalLayout que se encuentran dentro de un VerticalLayout pero no encuentro ningun ejemplo. También he probado el addon Animator pero el comportamiento no es el correcto.

Dejo aquí el código del ejemplo de Animator. La idea es hacer algo similar a Inbox (Gmail)

for ( Notificacion t : notificaciones ){
            ThemeResource photoResource = new ThemeResource(
                    "img/profile-pic-300px.jpg");
            Image img = new Image("",photoResource);
            img.addStyleName("v-icon");
            img.setWidth(40.0f, Unit.PIXELS);
            img.setHeight(100,Unit.PERCENTAGE);

            Label emisor = new Label(t.getNombre());
            emisor.addStyleName(ValoTheme.LABEL_H4);

            Label titulo = new Label(t.getTitulo());
            titulo.addStyleName(ValoTheme.LABEL_H3);

            HorizontalLayout header = new HorizontalLayout(img,emisor, titulo);
            header.setComponentAlignment(emisor, Alignment.MIDDLE_CENTER);
            header.setComponentAlignment(img, Alignment.MIDDLE_LEFT);
            header.setComponentAlignment(titulo, Alignment.MIDDLE_RIGHT);
            header.setExpandRatio(img, 1f);
            header.setExpandRatio(emisor, 3f);
            header.setExpandRatio(titulo, 7f);
            header.setMargin(false);
            header.setSizeFull();
            header.setSpacing(false);

header.addStyleName(ValoTheme.WINDOW_TOP_TOOLBAR);
            header.addLayoutClickListener(new LayoutClickListener() {
                 
                /**
                 *
                 */
                private static final long serialVersionUID = -1749687906071209879L;
 
                @Override
                public void layoutClick(LayoutClickEvent event) {
                    if (body.isVisible()){
                        body.setVisible(false);
                        Animator.animate(body, new Css().translateY("-100px")).delay(0).duration(2000);
                    }else{
                        body.setVisible(true);
                        Animator.animate(body, new Css().translateY("100px")).delay(0).duration(2000);
                    }
                }
            });

            Label contenido = new Label(t.getContenido());
            contenido.setContentMode(ContentMode.HTML);

            HorizontalLayout body = new HorizontalLayout(contenido);
            body.setSizeFull();
            body.setVisible(false);

            VerticalLayout layout = new VerticalLayout(header,body);
            addComponent(layout);
            
        }

Saludos