0

さまざまなカテゴリ内でタグ付けされたアイテムを含むコンテンツがあります。すべてブロック div として表示されます。すべて同一です。

特定のカテゴリのアイテムを非表示/非表示にするオプションがあります。非表示のアイテムは としてマークされdisplay:none、残りは同じままです。

通常、ご想像のとおり、残りのアイテムは、非表示のアイテムによって残されたスペースを即座に埋めます。ただし、これを CSS の位​​置遷移で発生させて、瞬時に発生するのではなく、時間の経過とともに発生するようにしたいと考えています。

テストを簡単にするために、CSS ファイルに次のビットを追加しました。

*{
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

コードペンのリンクは次のとおりです。

http://codepen.io/zettam/pen/bazqF

「隠し」クラスがアイテムに追加されると、アイテムは即座に消えるため、遷移は発生しません。この移行/再配置を可能にする方法についてのアイデアはありますか?

4

2 に答える 2

1

これがあなたが探しているものだと思います：

http://blog.stevensanderson.com/2013/03/15/animating-lists-with-css-3-transitions/

于 2013-11-04T22:03:25.373 に答える
-1

あなたが何を求めているのかわかりませんが、これが役立つと思います

transition : position 0.5s ease-in-out;
-webkit-transition : position 0.5s ease-in-out;
-moz-transition : position 0.5s ease-in-out;
-o-transition : position 0.5s ease-in-out;
于 2013-11-04T21:46:40.037 に答える