0

CSS を使用して要素でJQueryUI のslideトランジションを実行すると、要素transformの上半分がアニメーション中に非表示になります。これが起こらないように JQueryUI アニメーションや CSS を調整する方法はありますか?

JSFiddle : 適切なコードで JSFiddle を作成しました - http://jsfiddle.net/9dTkL/4/

垂直方向のセンタリングを達成するために、次のことを行います。

<style>
#banner-welcome {
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
</style>

CSS 内のtopとtransformにより、バナーを中央に配置できます。

アニメーションを実行するには、次を実行します。

$('#banner-welcome').toggle(
  'slide',
  function()
  {
    document.location.href = "#/" + destination;
  }
);

アニメーションが始まると、 の上半分が#welcome-banner消え、下半分がアニメーションします。CSS からを削除したtransformところ、バナーが中央に配置されなくなったことを除いて、すべてがうまく機能しました。

AngularJS と の組み合わせにより、この方法で垂直センタリングを実行していng-viewsます。以前は JavaScript を使用して要素を中央に配置していましたが、$(window).resize()イベントにロジックを追加すると、他のng-views. これを特定のものに分離する方法が必要でしたng-view。

バナーの上半分が消えないように、アニメーションまたは CSS で調整できるものはありますか?

4

1 に答える 1

1

トグルは 1.9 で削除されました: http://api.jquery.com/toggle-event/

animate または slideDown または slideUp メソッドを使用してください

また、変換プロパティにはプレフィックスは必要ありません

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform: translateY(-50%);
}

transform-originプロパティを追加してみましたか

#banner-welcome {
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    width: 100%;
    top: 50%;

    transform-origin: 50% 50% 0;
    transform: translateY(-50%);
}

最新の Firefox 24 で上部が消えるのを見ていない

于 2013-10-10T18:18:32.690 に答える