Vaadin: Force CSS-containers to fit full width after animation

Question

I am developing with Vaadin 7 and wanted to create a sidebar, which can be toggled visible via button click. The sidebar-container appears / disappears with a CSS rotation animation and folds to the right.

All the components are placed in CSSLayouts and organized like this (Every container represents one Layout-object):

I want the mainContainer to take the full width of the root-container when the sidebar is toggled invisible. My problem is that the sidebarContainer only shows up if I give it a static width (e.g. 300px). When invisible, a white blank space remains where the sidebar used to be.

Here some pictures showing my idea of the result:

My orientation was the Vaadin Sampler, where the menu Button unfolds a sidebar and the main content gets moved to the left. Which possibilities exist to realize such a smooth container resizing animation?

Thanks in advance!

Answer 1

I figured out how to solve the problem with a combination of styling and Java code.

The button click event resizes the .sidebarContainer cssLayout. When the sidebar is toggled invisible, the layout width is set to 0. The sidebar container adapts two animation CSS classes for the opening and closing animations, which are also directed by the button click event.

Java

public void buttonClick(ClickEvent event) {

    if (sidebar.getStyleName().contains("sidebar-in"))
    {
        sidebar.removeStyleName("sidebar-in");
        sidebar.setStyleName("sidebar-out");
        sidebarContainer.setWidth(0,Unit.PIXELS);
        return;
    }

    sidebar.removeStyleName("sidebar-out");
    sidebar.setStyleName("sidebar-in");
    sidebarContainer.setWidth(300,Unit.PIXELS);
}

To let the .mainContainer shift as smoothly as in the Vaadin sampler application, I gave the .sidebarContainer a transition attribute. Now, when this container is resized by the button click event, the CSS ease-function creates a width-changing movement and the flex-layout of the mainContainer makes it stick to that movement. The sidebar itself is a panel inside the .sidebarContainer.

CSS

.mainContainer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    flex: 1;
    order: 1;
    width: auto;
}

.sidebarContainer { 
    order: 2;   
    transition: width 1s ease;
    -moz-transition: width 1s ease;
}

.sidebar-in{
   animation: sidebarAnimationFramesIn ease 1s;
   animation-iteration-count: 1;
   transform-origin: 100% 50%;
   animation-fill-mode:forwards;
   width: 100%;
}

.sidebar-out{
   animation: sidebarAnimationFramesOut ease 1s;
   animation-iteration-count: 1;
   transform-origin: 100% 50%;
   animation-fill-mode:forwards;
   width: 100%;
}

I realized the toggle-animation of the sidebar by adding Keyframes in CSS