在jquery、css中打开div无法实现平滑

Question

所以我正在为我的计算器编写一个下滑动画，我已经阅读了网络上的所有资源，但似乎仍然无法实现div上的平滑度。一些内容滑出，但一半和背景容器似乎只是弹出。

$(document).ready(function() {
  $('.calculator-container').hover(function() {
    $('.calculator-container').toggleClass('open');
  });
});

html {
  font-family: Lora;
  background-color: #ededed;
}

b {
  text-align: center;
}

label {
  margin: 10px 0px 4px 0px;
}

body {
  display: flex;
  justify-content: center;
  gap: 100px;
}

.calculator-container {
  margin-top: 50px;
  border-radius: 12px;
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.1);
  background-color: #f4f4f4;
  padding: 40px 45px 40px 45px;
  width: fit-content;
  overflow: hidden;
  transition: height 0.3s;
}

.calculator-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 0;
  transition: height 0.3s;
}

.calculator-container.open .calculator-content {
  height: 100%;
  /* Adjust the height accordingly */
}

.select_container {
  font-family: Lora;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 7.025px;
  transition-duration: 0.6s;
}

.select_span_container {
  font-family: Lora;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  background-color: #e9ecef;
  color: #495057;
  border-left: none;
  transition-duration: 0.6s;
}

.select_span_container:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.select_container:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.input_box {
  font-family: Lora;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 6px;
  flex: 1;
  transition-duration: 0.6s;
}

.input_box:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.input_span_box {
  font-family: Lora;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  background-color: #e9ecef;
  color: #495057;
  border-left: none;
}

.input_container {
  display: flex;
}

.input_container input {
  border-radius: 5px 0 0 5px;
}

.checkbox_container {
  display: inline-block;
  margin: 10px 0px 10px 0px;
}

.calculator_solvebutton {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition-duration: 0.6s;
}

.calculator_solvebutton:hover {
  background-color: #0056b3;
  color: #fff;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="calculator-container">
  <b style="font-size:34px; padding-bottom: 20px;">Algas kalkulators</b>

  <div class="calculator-content">
    <label for="year">Izvēlieties aprēķina gadu:</label>
    <select class="select_container" id="year" name="year">
      <option value="g24">2024. gads</option>
      <option value="g23">2023. gads</option>
    </select>

    <label for="salary">Mēnēšalga: </label>
    <div class="input_container">
      <input class="input_box" type="number" min="1" max="500000" step="0.01" id="salary">
      <span class="input_span_box">EUR/mēnesis</span>
    </div>

    <label for="dependant">Apgādājamo personu skaits: </label>
    <input class="input_box" type="number" min="0" max="20" step="1" id="dependant">

    <label for="minimum">Mēneša neapliekamais minimums: </label>
    <div class="input_container">
      <input class="input_box" type="number" min="0" max="500" step="0.01" id="minimum">
      <span class="input_span_box">EUR/mēnesis</span>
    </div>

    <b style="font-size:26px; margin-top: 10px"> Papildu noteikumi </b>

    <label for="disability">Invaliditāte: </label>
    <select class="select_container" id="disability">
      <option value="no">Nav</option>
      <option value="g1-2">1. vai 2. grupa</option>
      <option value="g3">3. grupa</option>
    </select>

    <div class="checkbox_container">
      <input type="checkbox" id="NPK">
      <label for="NPK">Politiski represēta vai NPK persona</label>
    </div>

    <button class="calculator_solvebutton" onclick="calculateSalary()">Aprēķināt</button>

  </div>
</div>

怎样才能达到完美的流畅度，这种情况应该使用jquery吗？

Answer 1

当您转换元素的高度时，会导致其内容回流，这需要每一分之一秒完成大量工作。我确信转换位置（顶部）而不是高度会更平滑。

$(document).ready(function() {
  $('.calculator-container').hover(function() {
    $('.calculator-container').toggleClass('open');
  });
});

html {
  font-family: Lora;
  background-color: #ededed;
}

b {
  text-align: center;
}

label {
  margin: 10px 0px 4px 0px;
}

body {
  display: flex;
  justify-content: center;
  gap: 100px;
}

.calculator-container {
  margin-top: 50px;
  border-radius: 12px;
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.1);
  background-color: #f4f4f4;
  padding: 40px 45px 40px 45px;
  width: fit-content;
  overflow: hidden;
}

.calculator-content {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: top 1.3s;
  top: -530px;
  position: relative;
}

.calculator-container.open .calculator-content {
  top: 0;
  /* Adjust the height accordingly */
}

.select_container {
  font-family: Lora;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 7.025px;
  transition-duration: 0.6s;
}

.select_span_container {
  font-family: Lora;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  background-color: #e9ecef;
  color: #495057;
  border-left: none;
  transition-duration: 0.6s;
}

.select_span_container:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.select_container:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.input_box {
  font-family: Lora;
  border-radius: 5px;
  border: 1px solid #ccc;
  padding: 6px;
  flex: 1;
  transition-duration: 0.6s;
}

.input_box:hover {
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19);
}

.input_span_box {
  font-family: Lora;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 0;
  background-color: #e9ecef;
  color: #495057;
  border-left: none;
}

.input_container {
  display: flex;
}

.input_container input {
  border-radius: 5px 0 0 5px;
}

.checkbox_container {
  display: inline-block;
  margin: 10px 0px 10px 0px;
}

.calculator_solvebutton {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition-duration: 0.6s;
}

.calculator_solvebutton:hover {
  background-color: #0056b3;
  color: #fff;
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="calculator-container">
  <b style="font-size:34px; padding-bottom: 20px;">Algas kalkulators</b>

  <div class="calculator-content">
    <label for="year">Izvēlieties aprēķina gadu:</label>
    <select class="select_container" id="year" name="year">
      <option value="g24">2024. gads</option>
      <option value="g23">2023. gads</option>
    </select>

    <label for="salary">Mēnēšalga: </label>
    <div class="input_container">
      <input class="input_box" type="number" min="1" max="500000" step="0.01" id="salary">
      <span class="input_span_box">EUR/mēnesis</span>
    </div>

    <label for="dependant">Apgādājamo personu skaits: </label>
    <input class="input_box" type="number" min="0" max="20" step="1" id="dependant">

    <label for="minimum">Mēneša neapliekamais minimums: </label>
    <div class="input_container">
      <input class="input_box" type="number" min="0" max="500" step="0.01" id="minimum">
      <span class="input_span_box">EUR/mēnesis</span>
    </div>

    <b style="font-size:26px; margin-top: 10px"> Papildu noteikumi </b>

    <label for="disability">Invaliditāte: </label>
    <select class="select_container" id="disability">
      <option value="no">Nav</option>
      <option value="g1-2">1. vai 2. grupa</option>
      <option value="g3">3. grupa</option>
    </select>

    <div class="checkbox_container">
      <input type="checkbox" id="NPK">
      <label for="NPK">Politiski represēta vai NPK persona</label>
    </div>

    <button class="calculator_solvebutton" onclick="calculateSalary()">Aprēķināt</button>

  </div>
</div>