フレックスボックスレイアウト - トランジションが動作しない

Question

私は、ヘッダー、フッター、およびコンテンツを持つフレックスボックスレイアウトに取り組んでいます。 コンテンツセクションには、複数のクリック可能なフレックスアイテムがあります。フレックスアイテムの誰かをクリックすると、コンテンツセクションの幅と高さ全体が埋められます。単純なアニメーションを実装するためにすべてのフレックスアイテムにtransition:allを使用しました。しかし、それは動作していない？

codepenリンクhttps://codepen.io/yesvin/pen/XzvdQo?editors=0100

HTML

<div class="flxWrapper"> 
    <div class="flxHeader"> 
    </div> 
<div class="flxContainer"> 
    <div class="flxItem"></div> 
    <div class="flxItem"></div> 
    <div class="flxItem"></div> 
    <div class="flxItem"></div> 
    <div class="flxItem" style="background-color:#ff0088;"></div> 
    <div class="flxItem"></div> 
    <div class="flxItem"></div> 
    <div class="flxItem" style="background-color:#ff8800;"></div> 
</div> 
    <div class="flxFooter"> 
    </div> 
</div> 

CSS

html, body { 
    height:80vh; 
} 
.flxWrapper { 
    width:600px; 
    margin:0 auto; 
    height:100%; 
    border:solid 1px #ff0000; 

    display:flex; 
    align-items:stretch; 
    justify-content:center; 
    flex-direction:column; 
} 
.flxHeader { 
    padding:20px; 
    border-bottom:solid 1px #ccc; 
} 
.flxFooter { 
    padding:20px; 
    min-height:100px; 
    border-top:solid 1px #ccc; 
} 
.flxContainer { 
    display:flex; 
    flex:1; 

    flex-wrap:wrap; 
    width:100%; 
    border:none; 
    margin:0 auto; 
    position:relative; 
} 
.flxItem { 
    padding:10px; 
    margin:10px; 
    border:solid 1px #000; 
    transistion:all 2s ease-in-out 2s; 
    width:calc(100% * (1/4)); 
    flex:1 0 auto; 
    align-self:stretch; 
} 

.active { 
    background:rgba(125,125,125,1); 
    z-index:10; 
    width:calc(100% * (1/1) - 40px); 
    height:calc(100% * (1/1) - 40px); 
    position:absolute; 
    top:0; 
    left:0; 
    align-self:stretch; 
} 

JS

を見つけてください。

$(document).on('click','.flxItem', function(){ 
    $(this).toggleClass('active'); 
}); 

注：

1. 私はアクティブクリックフレックス項目をチェックするために、2つのフレックスの項目については、インラインスタイルを使用しています。

2. 幅は、 1行あたりの列の数。

ご協力いただければ幸いです。前もって感謝します。

Answer 1

あなたは.flxItemのルールにタイプミスがあります。

https://codepen.io/anon/pen/pdMErJ

の代わりに "遷移" の "transistionを"