javascript - 使用 JS 和 CSS 转换切换 Flex 的展开和折叠

Question

我正在尝试使用 CSS 过渡展开和折叠一个 div。 div 在单击时展开，并应用过渡，但在折叠时不应用过渡。当“扩展”类被移除并且 div 返回到其先前状态时，我如何应用转换？

HTML

<div class="container">
  <div class="row">
    <div class="collapse">
    </div>
    <div class="box-2">
    </div>
  </div>
</div>

JS

var box = document.querySelector('.collapse')

box.addEventListener("click", function(){
  box.classList.toggle('expand')
})

CSS

.collapse {
 flex: 0 0 50%;
 max-width: 50%;
 padding: 30px;
 background-color: red;
 transition: flex 1000ms ease;
}

.expand {
  flex: 0 0 66.66667%;
  max-width: 66.66667%;
  background-color: red;
  padding: 30px;
  transition: flex 1000ms ease;
}


.box-2 {
  flex-basis: 0;
  flex-grow: 1;
  padding: 30px;
  max-width: 100%;
  background-color: pink;
}


.container {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

JSFiddle 供引用 - http://jsfiddle.net/gmezskwn/30/

Answer 1

您应该从 .expand 中删除 max-width

.collapse {
   flex: 0 0 50%;
   max-width: 66.6666%;
   padding: 30px;
   background-color: red;
   transition: flex 1000ms ease;
}

.expand {
   flex: 0 0 66.66667%;
   background-color: red;
}

http://jsfiddle.net/gmezskwn/41/