如何使用单选检查设置 div 的动画显示和消失？

Question

所以我正在制作一个在线表单，我添加了两个单选按钮，我希望当我单击第二个单选按钮时出现一个 div，并在单击第一个单选按钮时使 div 消失。我成功地做到了这一点，但我似乎不知道如何为其设置动画，使其看起来更令人愉悦。这是 html 代码：                    <div class="form-group">                        <div class="form-row">                            <div class="col-md-2"></div>                            <div class="col-md-4">                                <div class="custom-control custom-radio">                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>                                </div>                            </div>                            <div class="col-md-4">                                <div class="custom-control custom-radio">                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>                                </div>                            </div>                            <div class="col-md-2"></div>                        </div>                    </div>                    <div class="form-group" id="newStud" style="display: none;">                        <div class="form-row">                            <div class="col-md-6">                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">                            </div>

Answer 1

我建议你为此使用animated.css。 的用法只是将 css 添加到您的项目中并在 class 中编写动画类型。您可以使用多种动画类型https://daneden.github.io/animate.css/

var radio_h = document.getElementById("customRadio1");

                        var radio = document.getElementById("customRadio2");

                        radio.onchange = function() {

                          if (radio.checked === true) {

                            document.getElementById("newStud").style.display = "block";

                          }

                        }

                        radio_h.onchange = function() {

                            if (radio_h.checked === true) {

                                document.getElementById("newStud").style.display = "none";

                            }

                        }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" rel="stylesheet"/>

 <div class="form-group animated slideInDown">

                        <div class="form-row">

                            <div class="col-md-2"></div>

                            <div class="col-md-4">

                                <div class="custom-control custom-radio">

                                <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">

                                <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>

                                </div>

                            </div>

                            <div class="col-md-4">

                                <div class="custom-control custom-radio">

                                <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">

                                <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>

                                </div>

                            </div>

                            <div class="col-md-2"></div>

                        </div>

                    </div>

                    <div class="form-group animated slideInLeft" id="newStud" style="display: none;">

                        <div class="form-row">

                            <div class="col-md-6">

                                <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>

                                <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">

                            </div>

                            <div class="col-md-6">

                                <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>

                                <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">

                            </div>

                        </div>

                    </div>

Answer 2

动画无法添加到display none的元素上，因此需要使用visibility & opacity 样式以获得流畅的动画，例如：

var radio_h = document.getElementById("customRadio1");

var radio = document.getElementById("customRadio2");

radio.onchange = function() {

  if (radio.checked === true) {

    document.getElementById("newStud").classList.add('show')

  }

}

radio_h.onchange = function() {

  if (radio_h.checked === true) {

    document.getElementById("newStud").classList.remove('show')

  }

}

#newStud {

  visibility: hidden;

  opacity: 0;

  transition: visibility 0s linear 0.5s, opacity 0.5s linear;

}

#newStud.show {

  visibility: visible;

  opacity: 1;

  transition-delay: 0.4s;

}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">

<div class="form-group">

  <div class="form-row">

    <div class="col-md-2"></div>

    <div class="col-md-4">

      <div class="custom-control custom-radio">

        <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">

        <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>

      </div>

    </div>

    <div class="col-md-4">

      <div class="custom-control custom-radio">

        <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">

        <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>

      </div>

    </div>

    <div class="col-md-2"></div>

  </div>

</div>

<div class="form-group" id="newStud">

  <div class="form-row">

    <div class="col-md-6">

      <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>

      <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">

    </div>

    <div class="col-md-6">

      <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>

      <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">

    </div>

  </div>

</div>

Answer 3

您可以使用 jQuery 轻松完成，但我已经使用 jQuery/VanilaJS 添加了代码。请在此处查看答案。 使用 jQuery

/* -- USING JQUERY -- */

$('input[type=radio][name=studOldNew]').on('change', function() {

    console.log('change:: ', $(this).val())

  switch ($(this).val()) {

    case 'old':

      $('#newStud').fadeOut();

      break;

    case 'new':

      $('#newStud').fadeIn();

      break;

  }

});

使用 VanillaJS   

/* -- USING VANILA JS*/

var radios = document.querySelectorAll("input[type=radio][name=studOldNew]");

radios.forEach(r => {

    r.addEventListener("change", function(e) {

      var target = e.target;

    switch (target.value) {

      case 'old':

        document.getElementById('newStud').style.opacity = 0;

        setTimeout(() => {

            document.getElementById('newStud').style.visibility = 'hidden';

        }, 1000)

        break;

      case 'new':

        document.getElementById('newStud').style.visibility = 'visible';

        document.getElementById('newStud').style.opacity = 1;

        break;

    }

  });

})