5

一部のデータに対して複数のレイアウトを定義するために、CSS 親クラスを使用しています。親クラスを変更するとレイアウトが思い通りに完全に変わりますが、CSS アニメーション (トランジション) を追加するのも面白いのではないかと思いました。私はそれを機能させることができないようです。私は別の同様の質問を見つけましたが、答えがなく、まったく同じではありません (または単純ではありません)。

これがフィドルです：http://jsfiddle.net/scottbeeson/wmK2F/1/

私は今、どのトランジションかはあまり気にしません。高さ、幅、色、何でも。誰かが私が間違っていることを示したら、それを微調整できます。

HTML:

<div id="toggleLayout">Click To Toggle</div>
<div class="layout layoutCards">
    <span class="entity">
        Test
    </span>
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
    <span class="entity">
        Test
    </span>    
</div>

CSS:

.entity { /* animate */
  -webkit-transition: height .5s linear;
  -moz-transition: height .5s linear;
}

.layoutCards .entity {
    display: inline-block;
    border: 1px solid blue;
    margin: 5px;
    height: 100px;
    width: 100px;
}

.layoutList .entity {
    display: block;
    border: 1px solid blue;
    margin: 5px;
    height: 20px;
}
4

1 に答える 1

3

display要素の を からinline-blockに変更していblockます。このような変更を移行することはできません。簡単displayに両方を同じにすることができます。ただし、それは望ましい動作を排除します。

プロパティを介して要素を操作するのではなく、2 番目の要素でfor 、 set 、 keep をdisplay交換できます。これはうまくいくようです。jsFiddle here ですが、根本的な変更により、適切なアニメーションが生成されません..display:inline-blockfloat:leftfloat:nonedisplay:block

.layoutCards .entity {
    float: left;
}

.layoutList .entity {
    float: none;
    display:block;
}

display:blockまたは、両方を設定することもできます。これを生成する - example here .

于 2013-10-29T17:05:24.507 に答える