javascript - 无法为textbox2的向上动画移动

我有一个包含2个button和2个textarea的表单。加载时，我只想显示section1（按钮，文本区域）和section2按钮。单击section2时，我想隐藏section1文本区域，显示section2 text area并逐渐将其移至section1 text area所在的屏幕顶部（因为section2 text area是向上）。单击section1按钮时，我想隐藏section2文本区域并显示section1 textarea向下增长的过渡。

到目前为止，我已经编写了以下代码。虽然我可以显示/隐藏两个部分，但无法创建动画。

function showSection1HideOthers(event) {
  var target = event.target;
  console.log("will show question", target);
  var elToShow = $("#section1");
  var elToHide = $("#section2");
  elToShow.addClass("uncollapsed");
  elToShow.removeClass("collapsed");
  elToHide.addClass("collapsed");
  elToHide.removeClass("uncollapsed");
}

function showSection2HideOthers(event) {
  var target = event.target;
  console.log("will show question", target);
  var elToShow = $("#section2");
  var elToHide = $("#section1");
  elToShow.addClass("uncollapsed");
  elToShow.removeClass("collapsed");
  elToHide.addClass("collapsed");
  elToHide.removeClass("uncollapsed");
}

.collapsed {
  display: none;
  animation-name: contract;
  animation-duration: 4s;
}

.uncollapsed {
  display: block;
  animation-name: expand;
  animation-duration: 4s;
}

@keyframes expand {
  0% {
    display: none;
    height: 0%;
    opacity: 1;
  }

  100% {
    display: block;
    height: 100%;
    opacity: 0;
  }
}


@keyframes contract {
  0% {
    display: block;
    height: 100%;
    opacity: 0;
  }

  100% {
    display: none;
    height: 0%;
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="new-form" onSubmit="addPracticeQuestion()" novalidate>
  <div>
    <!-- label and small in same line. select in a new line, thus enclosed select in a div-->
    <button type="button" class="unselected-button" id="section1-collapsable-button" onclick="showSection1HideOthers(event)">Section1</button>
    <div id="section1">
      <div class="section1-div" id="description-div">
        <textarea id="section1-description" type="text" rows="4">Section 1</textarea>
      </div>
    </div>
    <!-- transition to this only after the question has been filled correctly-->
    <button type="button" class="unselected-button" id="section2-collapsable-button" onclick="showSection2HideOthers(event)">Section2</button>
    <div class="collapsed" id="section2">
      <div id="section2-div">
        <textarea id="section2-description" type="text" rows="4"> Section 2</textarea>
      </div>
    </div>
  </div>
</form>

最佳答案

可以看到您正在使用jQuery，因此可以使用slideDown()和slideUp()方法。

在此处了解更多信息-> slideUp您还可以向这些方法添加选项。像持续时间，缓和等等

另外，我对您的HTML / jQ代码进行了一些更改。

对按钮（unselected-button）使用通用类，并使用jquery选择它们，然后在其上添加单击功能。

将公共类添加到各节。我用.section

然后，选择单击按钮之后的部分（当单击Submit1时，将选择section1，第二部分或即使您有更多按钮/部分也是如此），并用slideUp()显示

然后选择所有未选择的部分（在上一步中选择的部分）并用slideDown()隐藏它们

var button = $('.unselected-button'); // both buttons
$(button).on('click', function() {
  var elToShow = $(this).next('.section');
  var elToHide = $('.section').not(elToShow);
  elToShow.slideDown()
  elToHide.slideUp()
})

#section2 {
  display:none
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="new-form" onSubmit="addPracticeQuestion()" novalidate>
  <div>
    <!-- label and small in same line. select in a new line, thus enclosed select in a div-->
    <button type="button" class="unselected-button" id="section1-collapsable-button">Section1</button>
    <div id="section1" class="section">
      <div class="section1-div" id="description-div">
        <textarea id="section1-description" type="text" rows="4">Section 1</textarea>
      </div>
    </div>
    <!-- transition to this only after the question has been filled correctly-->
    <button type="button" class="unselected-button" id="section2-collapsable-button">Section2</button>
    <div class="section" id="section2" >
      <div id="section2-div">
        <textarea id="section2-description" type="text" rows="4"> Section 2</textarea>
      </div>
    </div>
  </div>
</form>

关于javascript - 无法为textbox2的向上动画移动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60390610/