6

ウィンドウのサイズを変更すると、フローティング div は予想どおり次の行に折り返されます。しかし、このレイアウトの変更をアニメーション化してほしいです。

編集:余談ですが、JQuery に依存しない解決策を見つけるとよいでしょう。必要に応じて、独自の js を作成してもかまいません。理想的には、これが機能していることを確認したら、これを AngularJS ディレクティブに実装したいので、jQuery 依存関係を望まないのはなぜですか。

これが私のコードの短縮版です: http://jsfiddle.net/cDS7Q/3/

HTML

<div id="content">

    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>
    <div>&nbsp;</div>

</div>

そして、ここに私のCSSがあります

body {background-color: #333;}

#content div {
    position: relative;
    float: left;
    background-color: #eee;
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100px;
    height: 100px;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

#content {
    margin-top: 50px;
    padding-top: $gutter;
    padding-bottom: 50px;
    overflow: hidden;
    width: 100%;
}

私が達成しようとしている効果は、このサイトに似ています: http://saffron-consultants.com/journal/

ウィンドウのサイズを変更して、ブロックが新しい位置にアニメートされるのを確認します。

4

2 に答える 2

0

css で可能ですが、メディアクエリでパラメータを変更した場合のみです。

例えば：

要素の幅、またはメディア クエリでパディングとマージンを変更すると、アニメーションが表示されます。また、div を絶対的または相対的に配置し、メディア クエリで位置を変更すると、機能します。

ただし、単純なフローティング/ラッピングではありません。そのためには JavaScript / jQuery が必要です。

たとえば、これをフィドルに追加します。

body {
    background-color: #333;
}

#content div {
    position: relative;
    float: left;
    background-color: #eee;
    margin-left: 20px;
    margin-bottom: 20px;
    width: 200px;
    height: 200px;

    -webkit-transition: all .7s ease;
    -moz-transition: all .2s ease;
    -ms-transition: all .7s ease;
    -o-transition: all .7s ease;
    transition: all .7s ease;
}

#content {
    margin-top: 50px;
    padding-top: $gutter;
    padding-bottom: 50px;
    overflow: hidden;
    width: 100%;
}

@media screen and (max-width: 480px) {
#content div {
    margin-left: 10px;
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
    }

}
于 2016-01-08T22:39:46.837 に答える