使用 JS 和 CSS 过渡切换 Flex 的展开和折叠

Question

我正在尝试使用 CSS 过渡来展开和折叠 div。 div 在单击时展开，并应用过渡，但在折叠时不应用过渡。当 'expand' 类被移除并且 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/