0

以下のように、YUI 2.8 でナビゲーション メニューを作成しました。

スライディング ウィンドウ メニュー

また、CSS トランジションを使用してタブをアニメーション化しました。CSS トランジションはブラウザーで広くサポートされておらず、私のアニメーションは Opera や IE などで動作しません。
私は既にそのページで YUI 2.8 を使用しているので、これらのタブをアニメーション化する方法を誰か教えてもらえますか?
任意のタブをクリックすると、縦方向にスムーズに (アニメーション化されて) 拡大するはずです。
以下は、タブを選択すると変更されるタブのプロパティです (タブのプロパティの下はアニメーション化する必要があります)。

  • パディング
  • 余白
  • 背景色
  • 国境

上の画像に注意してください:

  • 最初のタブが選択されたときのケース #1 では、右側にほとんどスペースが残っていません。
  • ケース #2 とケース #3 では、右側だけでなく左側にもスペースが残っています。
  • ケース＃4では、最後のタブが選択されたときに左側にスペースが残っています。
4

1 に答える 1

1

YUI には、クロス ブラウザーで使用できる優れたAnim ユーティリティがあります。アニメーションを実装するコードは、トランジションに必要なほとんどの計算を YUI Anim が処理するため、YUI Anim では非常に単純です。あなたの場合の例は次のとおりです。

var tab1_open = new YAHOO.util.ColorAnim('tab1', {
  padding : {to: 20},
  marginLeft : {from: 0, to: 30},
  marginTop : {from: 0, to 30},
  backgroundColor : {from: '#999', to: '#cecece'},
  borderColor : {to: '#000'}
}, 0.5);

次に、アニメーションを開始するには、次のように呼び出します。

tab1_open.animate();
于 2011-11-27T14:43:03.287 に答える