如何在 gwt. 中对面板宽度应用滑动效果？答案

【问题标题】：How to apply sliding effects with respect to panel width in gwt.?如何在 gwt. 中对面板宽度应用滑动效果？
【发布时间】：2016-07-26 08:53:43
【问题描述】：

我正在使用面板滑动效果并遇到类似的情况，

我有一个宽度为 150 像素的面板，里面有一些内容，在某些时候，如果我将它的大小减小 70 像素，我需要为该面板添加滑动效果。

我为此写了一个代码，

VerticalPanel myPanel=new VerticalPanel();
myPanel.setWidth(150+"px");

// here I do some operations 

myPanel.addStyleName("animated slideOutLeft");
myPanel.setWidth(80+"px");

当我减小它的大小时，它应该自动继承“动画 slideOutLeft”样式，并按原样显示内部内容。但在我的情况下，“slideOutLeft”被应用，但内部内容不会保持可见并且 myPanel 会滑出。

它应该部分滑出，即从 150px 到 80px 应该是可见的，这当前没有发生，而是完全滑出。

这有什么问题。？我该如何解决这个问题？

您可以参考https://agileui.com/demo/monarch/demo/admin-angular/index.html#/ 中的示例，我希望在左上角具有相同的 logoSliding 效果，即 slideIn 和 slidesOut。

【问题讨论】：

标签： html css animation gwt css-animations

【解决方案1】：

很久以前我问过类似的问题。我建议您this topic，您可以在其中找到结合百分比 width 和px min-width 的可能解决方案。

【讨论】：

【解决方案2】：

当您减小面板的宽度时，该面板中的子元素将在新宽度内重排。

您指向的示例在面板宽度减小时隐藏了一些子元素。

因此，如果面板始终包含适合较小宽度的子项，则您的代码将起作用。或者，您可以尝试在面板上设置overflow: hidden 并明确设置孩子的宽度。

【讨论】：

如果我的面板没有宽度怎么办？因此，它可以根据其内部内容大小进行调整。我尝试使用溢出：隐藏但没有奏效。如果该链接徽标面板滑出但徽标仍然存在，这在我的情况下不会发生，我的徽标也被面板隐藏。
1.每个 HTML 元素都有宽度。它可以显式设置或由浏览器的布局引擎计算。 2. 如果不查看您的代码，我们将无法帮助您。