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

您应该从public partial class MN_REITER { public decimal REITERID { get; set; } public string REITER_BEZEICHNUNG { get; set; } public string REITER_LABEL { get; set; } }删除max-width

.expand

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

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

1 个答案: