如何使用单选检查设置 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");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var radio = document.getElementById("customRadio2");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radio.onchange = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (radio.checked === true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("newStud").style.display = "block";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radio_h.onchange = function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (radio_h.checked === true) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("newStud").style.display = "none";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }<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"/>&nbsp;<div class="form-group animated slideInDown">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group animated slideInLeft" id="newStud" style="display: none;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>

Answer 2

动画无法添加到display none的元素上，因此需要使用visibility & opacity 样式以获得流畅的动画，例如：var radio_h = document.getElementById("customRadio1");var radio = document.getElementById("customRadio2");radio.onchange = function() {&nbsp; if (radio.checked === true) {&nbsp; &nbsp; document.getElementById("newStud").classList.add('show')&nbsp; }}radio_h.onchange = function() {&nbsp; if (radio_h.checked === true) {&nbsp; &nbsp; document.getElementById("newStud").classList.remove('show')&nbsp; }}#newStud {&nbsp; visibility: hidden;&nbsp; opacity: 0;&nbsp; transition: visibility 0s linear 0.5s, opacity 0.5s linear;}#newStud.show {&nbsp; visibility: visible;&nbsp; opacity: 1;&nbsp; transition-delay: 0.4s;}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"><div class="form-group">&nbsp; <div class="form-row">&nbsp; &nbsp; <div class="col-md-2"></div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="customRadio1" name="studOldNew" class="custom-control-input" checked="checked">&nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="customRadio1" style="font-size: 18px!important;">Old Student</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-4">&nbsp; &nbsp; &nbsp; <div class="custom-control custom-radio">&nbsp; &nbsp; &nbsp; &nbsp; <input type="radio" id="customRadio2" name="studOldNew" class="custom-control-input">&nbsp; &nbsp; &nbsp; &nbsp; <label class="custom-control-label" for="customRadio2" style="font-size: 18px!important;">New Student/Transfer In</label>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-2"></div>&nbsp; </div></div><div class="form-group" id="newStud">&nbsp; <div class="form-row">&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <label for="inputTextBox" style="font-weight: 500; font-size: 18px!important;">Name of Previous School</label>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="inputTextBox" aria-describedby="nameHelp" placeholder="Enter firstname" name="pname" required maxlength="50">&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="col-md-6">&nbsp; &nbsp; &nbsp; <label for="inputTextBox2" style="font-weight: 500; font-size: 18px!important;">Address of Previous School</label>&nbsp; &nbsp; &nbsp; <input type="text" class="form-control" id="inputTextBox2" aria-describedby="nameHelp" placeholder="Enter lastname" name="padd" required maxlength="50">&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 3

您可以使用 jQuery 轻松完成，但我已经使用 jQuery/VanilaJS 添加了代码。请在此处查看答案。 使用 jQuery/* -- USING JQUERY -- */$('input[type=radio][name=studOldNew]').on('change', function() {&nbsp; &nbsp; console.log('change:: ', $(this).val())&nbsp; switch ($(this).val()) {&nbsp; &nbsp; case 'old':&nbsp; &nbsp; &nbsp; $('#newStud').fadeOut();&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; case 'new':&nbsp; &nbsp; &nbsp; $('#newStud').fadeIn();&nbsp; &nbsp; &nbsp; break;&nbsp; }});使用 VanillaJS&nbsp; &nbsp;/* -- USING VANILA JS*/var radios = document.querySelectorAll("input[type=radio][name=studOldNew]");radios.forEach(r => {&nbsp; &nbsp; r.addEventListener("change", function(e) {&nbsp; &nbsp; &nbsp; var target = e.target;&nbsp; &nbsp; switch (target.value) {&nbsp; &nbsp; &nbsp; case 'old':&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('newStud').style.opacity = 0;&nbsp; &nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('newStud').style.visibility = 'hidden';&nbsp; &nbsp; &nbsp; &nbsp; }, 1000)&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; case 'new':&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('newStud').style.visibility = 'visible';&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('newStud').style.opacity = 1;&nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; }&nbsp; });})