如何在删除某些 class 时向高度添加过渡

Question

我正在尝试在 class“约束”被移除时添加转换

我不明白我已经为最大高度添加了转换，但它不起作用

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

.container{
  max-height: auto;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s ease-out;
}
.constraint{
  max-height: 100px;
}
h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1><h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

当单击展开时，“约束”被删除但没有过渡

Answer 1

无需删除 class，您只需添加样式即可。

所以你只需要改变这个：

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

对此：

const container = document.getElementById('container');
const button = document.getElementById('button');
const constraint = document.querySelector(".constraint"); // Added this

button.addEventListener('click', ()=> {
    constraint.style.maxHeight = "1000px"; // Changed this
})

你的完整代码是这样的：

const container = document.getElementById('container');
const button = document.getElementById('button');
const constraint = document.querySelector(".constraint"); // Added this

button.addEventListener('click', ()=> {
    constraint.style.maxHeight = "1000px"; // Changed this
})

.container{
  max-height: auto;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s ease-out;
}
.constraint{
  max-height: 100px;
}
h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1><h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

Answer 2

transition 想要 max-height 的固定起始值，而不是 auto。设置大一点就可以了

 max-height: 1000px;

const container = document.getElementById('container');
const button = document.getElementById('button');

button.addEventListener('click', ()=> {
    container.classList.remove("constraint");
})

.container {
  max-height: 1000px;
  background: red;
  overflow: hidden;
  -webkit-transition: max-height 1s ease-out;
  -moz-transition: max-height 1s ease-out;
  -o-transition: max-height 1s ease-out;
  transition: max-height 1s;
}

.container.constraint {
  max-height: 100px;
}

h1 {
  font-size: 50px;
}

<div id="container" class="container constraint">
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
  <h1>
    Hello
  </h1>
</div>

<button id="button">
expand
</button>

如何在删除某些 class 时向高度添加过渡

How to add transition to height when certain class is removed

javascript

html

css

css-transitions