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

Question

我正在使用 Vaadin 7 进行开发，想创建一个侧边栏，可以通过单击按钮将其切换为可见。侧边栏容器以 CSS 旋转动画出现/消失并向右折叠。

所有组件都放在CSSLayouts中并组织如下（每个容器代表一个Layout-object）：

我希望 mainContainer 在侧边栏切换为不可见时占据 root 容器的整个宽度。我的问题是 sidebarContainer 只有在我给它一个静态宽度（例如 300px）时才会出现。不可见时，白色空白 space 会保留在侧边栏原来所在的位置。

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

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

提前致谢！

Answer 1

CSSPanel 的优点和缺点是它是白色的 table，在这里什么都可以做，但仍然需要编写（例如 css 样式等）。我可以建议看一下 HorizontalSplitPanel，您应该在其中阻止和隐藏分隔符。当您决定折叠一侧时，它应该能完美聆听。我现在还没有在你的用例中尝试过它，但我以前用过，从来没有遇到过问题。试试吧！

Answer 2

我想出了如何结合样式和 Java 代码来解决问题。

按钮单击事件调整 .sidebarContainer cssLayout 的大小。当侧边栏切换为不可见时，布局 width 设置为 0。侧边栏容器为打开和关闭动画适配了两个动画CSS类，也是由按钮点击事件定向

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

为了让 .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

中添加关键帧实现了侧边栏的切换动画

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

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

html

css

responsive-design

vaadin

vaadin7