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

【问题标题】：Vaadin: Force CSS-containers to fit full width after animationVaadin：强制 CSS 容器在动画后适应全宽
【发布时间】：2015-02-04 08:22:06
【问题描述】：

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

所有的组件都放在CSSLayouts中，并像这样组织（每个容器代表一个Layout-object）：

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

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

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

提前致谢！

【问题讨论】：

标签： html css responsive-design vaadin vaadin7

【解决方案1】：

我想出了如何结合样式和 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 的 flex-layout 使它坚持这个动作。侧边栏本身是.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 中添加关键帧来实现侧边栏的切换动画

【讨论】：

不错。这可能会派上用场！

【解决方案2】：

CSSPanel 的优点和缺点在于它是一张白表，可以在其中完成所有操作，但仍需要编写（如 css 样式等）。我可以建议看看 HorizontalSplitPanel 你应该在哪里阻止和隐藏分隔符。当您决定折叠一侧时，它应该可以完美聆听。我现在还没有在你的用例上尝过它，但我以前用过，从来没有遇到过问题。试一试！

【讨论】：

感谢您的回答。我之前尝试过使用 HorizontalSplitPanel，这对于分离器位置的静态移动效果很好。不幸的是，我不知道在这种情况下如何插入动画。我不喜欢必须通过按钮单击事件来指定分隔符位置的事实。