亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何使用單選檢查設置 div 的動畫顯示和消失？

如何使用單選檢查設置 div 的動畫顯示和消失？

jeck貓 2023-12-19 16:38:36
所以我正在制作一個在線表單，我添加了兩個單選按鈕，我希望當我單擊第二個單選按鈕時出現一個 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>
查看完整描述

3 回答

?
尚方寶劍之說

TA貢獻1788條經驗 獲得超4個贊

我建議你為此使用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>


查看完整回答
反對 回復 2023-12-19
?
開滿天機

TA貢獻1786條經驗 獲得超13個贊

動畫無法添加到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>


查看完整回答
反對 回復 2023-12-19
?
SMILET

TA貢獻1796條經驗 獲得超4個贊

您可以使用 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;

    }

  });

})




查看完整回答
反對 回復 2023-12-19
  • 3 回答
  • 0 關注
  • 227 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號