CODEWITHSUNDEEP
htmlcssflexbox
Yesvinkumar
Yesvinkumar

Reputation: 559

Flexbox layout - Transition not working

I am working on the flexbox layout which has header, footer, and content. In the content section i have multiple clickable flex items. When ever i click on anyone of the flex items, it will fill the whole width and height of the content section. I used transition:all for all the flex items to implement a simple animation; but its not working?

Please find the codepen link 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');
});

NOTE:

  1. I am using in-line style for 2 flex items, to check the active clicked flex item.

  2. Width is calculated based on no. of columns per row.

Any help would be greatly appreciated. Thanks in advance.

Upvotes: 0

Views: 3613

Answers (1)

Johannes
Johannes

Reputation: 67758

You have a typo in the rule for .flxItem: "transistion" instead of "transition"

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

Upvotes: 1

Related Questions