Vaadin：强制CSS容器在动画后适合全宽

Question

我正在使用Vaadin 7进行开发，并希望创建一个侧边栏，可以通过按钮点击切换显示。侧边栏容器使用CSS旋转动画显示/消失，并向右折叠。

所有组件都放在CSSLayouts中并按此组织（每个容器代表一个Layout对象）：

当侧边栏切换为不可见时，我希望mainContainer获取root - 容器的整个宽度。我的问题是，如果我给它一个静态宽度（例如300px），sidebarContainer只显示。当看不见时，白色的空白区域仍然是侧边栏所在的位置。

这里有一些照片显示了我对结果的看法：

我的方向是Vaadin Sampler，其中菜单按钮展开侧边栏，主要内容移动到左侧。有哪些可能性来实现这种平滑的容器调整大小动画？

提前致谢！

Answer 1

我想出了如何通过样式和Java代码的组合解决问题。

按钮点击事件会调整.sidebarContainer cssLayout的大小。当侧边栏切换为不可见时，布局width将设置为0。 侧边栏容器为开始和结束动画调整两个动画CSS类，这些动画也由按钮单击事件指示。

<强>爪哇

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);
}

为了让.mainContainer像Vaadin采样器应用程序一样平滑，我给了.sidebarContainer一个转换属性。现在，当按钮单击事件调整此容器的大小时，CSS缓动函数会创建一个宽度变化的运动，而mainContainer的弹性布局会使其​​坚持该运动。侧边栏本身是.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%;
}

我通过在CSS中添加关键帧来实现侧边栏的切换动画

Answer 2

CSSPanel的好与坏是它是一张白色表，一切都可以完成，但仍需要写（如css样式等）。 我建议你去看看Horizo​​ntalSplitPanel，你应该阻止和隐藏分隔符。当你决定垮台时，它应该听得很清楚。 我现在还没有尝试过你的用例，但我之前使用过，从来没有遇到过问题。试一试！