Flexbox 布局 - 转换不起作用答案

【问题标题】：Flexbox layout - Transition not workingFlexbox 布局 - 转换不起作用
【发布时间】：2018-05-23 04:55:10
【问题描述】：

我正在研究具有页眉、页脚和内容的 flexbox 布局。在内容部分，我有多个可点击的弹性项目。当我点击任何弹性项目时，它会填满内容部分的整个宽度和高度。我使用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;
}

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

注意：

我正在对 2 个 flex 项使用内联样式，以检查活动单击的 flex 项。
宽度是根据编号计算的。每行的列数。

任何帮助将不胜感激。提前致谢。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

.flxItem 的规则中有错字：“transition”而不是“transition”

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

【讨论】：