Question

我正在处理包含页眉，页脚和内容的flexbox布局。在内容部分，我有多个可点击的弹性项目。当我点击任何弹性项目时，它将填充内容部分的整个宽度和高度。我使用transition:all来表示所有flex项目以实现一个简单的动画;但它不起作用？

请找到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');
});

注意：

我使用2个弹性项目的内联样式，以检查活动的点击弹性项目。
宽度根据编号计算。每行的列数。

非常感谢任何帮助。提前谢谢。

Answer 1

.flxItem规则中有一个拼写错误：＆＃34; transistion＆＃34;而不是＆＃34;过渡＆＃34;

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

Flexbox布局 - 转换不起作用

1 个答案: