css - CSS トランジション: 右に移動

Question

レスポンシブ Web サイトを作成する必要があり、ブラウザーを指定されたサイズに縮小すると、左側のロゴが中央になるように右側に移動します。

これは、私が達成したい移行の例です。「2.トランジションのアニメーション化」ボックス1の下にあります

トランジションがホバーで開始することは知っていますが、ブラウザーのサイズが変更されたときにアクティブにすることは可能ですか? または代替方法はありますか？

Answer 1

これを行うには、CSS3 遷移と @media クエリを組み合わせて使用​​します。

div
{
  height: 100px;
  width: 200px;
  position: relative;
  background-color: #eee;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

@media all and (min-width: 400px) {
  div
  {
    background-color: #fc3;
    left: 100px;
  }
}

これが行うことは、相対的な位置で要素のトランジションを設定することですが、明らかにそれらを起動せず (:hover やその他のセレクターがないためleft: 100px;)、ブラウザーの幅が 400px を超える場合に位置の変更 ( ) を宣言します。max-width「以上」の値に使用します。

明らかに、値を必要なものに変更する必要がありますが、これがその方法です。

http://jsfiddle.net/AvhvD/

Answer 2

これが私がする方法です：

1: .logo { display block, width: xxx; margin 0 auto; transition: margin ... }
2: @media (...) { 
  .logo {
    margin-left: 0;
  }
}

Answer 3

JavaScript と Jquery で条件文を作成して、次の条件が真であることをテストできると考えていました: ブラウザ ウィンドウのサイズが変更され、ブラウザ ウィンドウのサイズが範囲内にある場合は、css クラスを追加します。そうでない場合は、css クラスを削除します。

この新しいクラスが作成されたので、CSS3 を使用してアニメーションを作成できるようになるかもしれません。これが機能するかどうかはよくわかりませんが、いつでも JQuery に戻すことができます。

さらに、トランジションをメディア クエリ内で適用できるかどうかもわかりません。もしそうなら、私は大きな支持者であり、それらを使用することを強くお勧めします.

私が助けてくれることを願っています。