Flexbox 布局 - 转换不起作用

Posted 2023-03-05

【中文标题】Flexbox 布局 - 转换不起作用

【英文标题】：Flexbox layout - Transition not working

【发布时间】：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;

JS

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

注意：

我正在对 2 个 flex 项使用内联样式，以检查活动单击的 flex 项。

宽度是根据编号计算的。每行的列数。

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

【参考方案1】：

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

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