gwtのパネル幅に対するスライドエフェクトの適用方法？

私はパネルのスライド効果を使って作業しています。gwtのパネル幅に対するスライドエフェクトの適用方法？

パネルには幅150pxのコンテンツがありますが、スライドの効果を追加する必要があるサイズを70px減らすこともできますそのパネル。

私はそれが自動的にそれがあるとして示す内のコンテンツと「アニメーションslideOutLeft」スタイルを継承しなければならないサイズです減らしたとき、私は

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

// here I do some operations 

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

、このためのコードを書きました。しかし私の場合は、「slideOutLeft」が適用されますが、内部コンテンツは表示されず、myPanel slidesOutは残ります。

部分的に滑っているはずです。つまり、現時点では表示されていないはずの150pxから80pxまでがスライドアウトされています。

どうしたのですか？どうすればこの問題を解決できますか？

https://agileui.com/demo/monarch/demo/admin-angular/index.html#/の例を参考にしてください。この場合、slidesInとslidesOutの左上隅のエフェクトで同じlogoSlidingが必要です。

出典

2016-04-06 Pratik Rawlekar

パネルの幅を小さくすると、そのパネル内の子要素が新しい幅でリフローされます。

この例では、パネルの幅が縮小されたときにいくつかの子要素を非表示にします。

パネルに常に小さい幅に収まる子供が含まれている場合は、コードが機能します。また、パネル上にoverflow: hiddenを設定し、子供の幅を明示的に設定することもできます。

出典

2016-04-06 06:22:52

私のパネルに幅がない場合はどうなりますか？そのため、内部コンテンツのサイズに合わせて調整することができます。私はオーバーフローで試した：隠されていたが、働かなかった。ロゴパネルが滑り落ちてもロゴが残っているリンクの場合、私の場合は起こりません。私のロゴもパネルで隠れています。 –

1.すべてのHTML要素に幅があります。明示的に設定することも、ブラウザのレイアウトエンジンによって計算することもできます。 2.あなたのコードを見ずにあなたを助けることはできません。 –

前回私は似たような質問をしました。 this topicをお勧めします。の割合がwidthとpxmin-widthの組み合わせが考えられます。

出典

2017-07-11 08:25:08

gwtのパネル幅に対するスライドエフェクトの適用方法？

答えて

関連する問題