Flexbox Layout - Übergang nicht

arbeitete ich auf dem Flexbox Layout arbeite, die Header, Footer hat, und Inhalt. Im Inhaltsbereich habe ich mehrere anklickbare Flex-Elemente. Wenn ich auf irgendeinen Flex-Artikel klicke, füllt er die gesamte Breite und Höhe des Inhaltsbereichs. Ich habe transition:all für alle Flex-Elemente verwendet, um eine einfache Animation zu implementieren; aber es funktioniert nicht?Flexbox Layout - Übergang nicht

Sie finden den Link 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; 
}

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

HINWEIS:

I für 2 flex Artikel in-line Stil verwendet, die aktiv angeklickt flex Artikel zu überprüfen.
Breite basiert auf nicht berechnet. von Spalten pro Zeile.

Jede Hilfe wäre sehr dankbar. Danke im Voraus.

Quelle

2017-12-08 Yesvinkumar