CSS トランジション効果を Wordpress ループに統合しました (Masonry も使用しましたが、競合が発生している可能性があります)。アニメーションが 1 回だけではなく 2 回再生されるのは、1 回スムーズに再生する方法が見つからないため、いらいらさせられます。このチュートリアルに基づいて、いくつかの js スクリプトと css3 を使用しました: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/

二重のアニメーションがあるページへのリンクは次のとおりです: http://crippslawtest.co.uk/?post_type=cripps_staff&Department=accounting

これが私のcss3です：

これが私のMasonry JSです：

}

これは私のコンテンツエリアです:

私はこれを1時間以上いじっています。また、ここに投稿されたものを検索してレビューしましたが、どれも私の問題を解決できませんでした.

私は 5 つの div を持っていますが、3 番目と 4 番目の div は期待どおりにスタックしません。代わりに、3 番目の div の最後の div スタックです。

http://jsbin.com/rajinabu

HTML

JS

このような動作を期待していたのですが、

こんにちは、以下は私が得ている出力です。SPECIALTIESが見出しです。そこにしましょう。

見出し SPECIALTIES の後に表示されるコンテンツを 2 列に配置する必要があります。

http://masonry.desandro.com/を使用しました。XSLT でページを開発しているため、石積みで表される HTML 初期化を使用できませんでした。Javascript を使用して初期化する場合、この機能は最初のセクションにのみ適用されます。つまり、SPECIALTIESの下のコンテンツにのみ適用されます。1 ページにSPECIALTIESのようなセクションが複数あります。

下の画像のように出力するアイデアはありますか?

更新: jquery の初期化を試みましたが、Web ページを検査した場合にのみ機能します。

コードは次のとおりです。

JQuery の初期化:

ここに私のページがあります: http://stage.ranchone.com/menu/index-revised.html

各セクションのVIEW ITEMリンクで見つけることができますありがとう

RoR プロジェクトで Masonry を実装する際に問題が発生しています。

現在の Web ページで説明できると思います: http://sttorybox.herokuapp.com/

ご覧のとおり、ページを開くと、石積みは正常に機能しています。ただし、たとえば、ストーリーの個々のページに移動し (ログインする必要があります-> user:test@test.com , pass:test)、ボックス内のタイトルをクリックします (最初のボックス、テスト ユーザーによって作成されました)。 、そしてページのタイトルをクリックしてください：トップバーの石積みのSTTORYBOXが機能しなくなり、理由がわかりません:/

これが私のJSコードです：

皆さんが私を助けてくれることを願っています。前もって感謝します。

I know these masonry questions tend to be very specific and cumbersome. This time I am stuck and can't figure out why the bottom row isn't floated together into one row.

What I got without masonry (just float left):

What I get with masonry:

What I expect:

HTML

CSS

JS

CodePen for playing

Anyone got an idea?