Javascript：按下按鈕時如何進行淡入淡出轉換？

Question

我是 Javascript 的新手，我想問一下創建淡入淡出過渡的最簡單方法是什么？ 就我而言，我必須顯示/隱藏 div 元素。 任何幫助是極大的贊賞！

---

我的表格的 javascript 如下所示

function registerNext(){
    document.querySelector(".first_name").style.display = "none";
    document.querySelector(".last_name").style.display = "none";
    document.querySelector(".email").style.display = "none";
    document.querySelector(".password1").style.display = "none";
    document.querySelector(".password2").style.display = "none";
    document.querySelector(".student_number").style.display = "block";
    document.querySelector(".graduation_year").style.display = "block";
    document.querySelector(".degree").style.display = "block";
    document.querySelector(".program").style.display = "block";
    document.querySelector(".btn-next").style.display = "none";
    document.querySelector(".btn-back").style.display = "inline";
    document.querySelector(".btn-signup").style.display = "inline";
    document.querySelector("form.register-form label").style.display = "block";
    document.querySelector("legend.step-2").style.display = "block";
    document.querySelector("legend.step-1").style.display = "none";
}
function registerBack(){
    document.querySelector(".first_name").style.display = "block";
    document.querySelector(".last_name").style.display = "block";
    document.querySelector(".email").style.display = "block";
    document.querySelector(".password1").style.display = "block";
    document.querySelector(".password2").style.display = "block";
    document.querySelector(".student_number").style.display = "none";
    document.querySelector(".graduation_year").style.display = "none";
    document.querySelector(".degree").style.display = "none";
    document.querySelector(".program").style.display = "none";
    document.querySelector(".btn-next").style.display = "block"; 
    document.querySelector(".btn-signup").style.display = "none"; 
    document.querySelector(".btn-back").style.display = "none";
    document.querySelector("form.register-form label").style.display = "none"; 
    document.querySelector("legend.step-2").style.display = "none"; 
    document.querySelector("legend.step-1").style.display = "block"; 
}

我的表格的 css：

.first_name, .last_name, .email, .password1, .password2, legend.step-1{
    display: block;
}

.student_number, .graduation_year, .degree, .program, form.register-form label, legend.step-2{
    display: none;
}

button.btn-next{
    display: block;
    margin-right: 0;
    margin-left: auto;
    animation: bounce;
}

button.btn-signup{
    display: none;
    float: right;
}

button.btn-back{
    display: none;
    margin-right: auto;
}

我正在使用 django 所以這就是我的表格如下所示。

HTML：

<form class="register-form" method="POST">
    {% csrf_token %}
    <fieldset class="form-group">
        <legend class="step-1">Account Setup</legend>
        <legend class="step-2">Academic Background</legend>
        {{ form | crispy }}
    </fieldset>

    <div class="form-group">
        <button class="btn-back" type="button" onclick="registerBack()">Back</button>
        <button class="btn-next" type="button"  onclick="registerNext()">Next</button>
        <button class="btn-signup" type="submit">Sign Up</button>
    </div>
</form>

這是我如何在 forms.py 中制作 forms 的一個示例：

email = forms.EmailField(
    label = '', 
    widget = forms.TextInput(attrs = {'placeholder': 'Email', 'class':'email'}), 
    max_length = 60
)

Answer 1

你應該試試 style-attribute opacity 。 例如，當您添加faded-out類時，這樣的樣式表會使某些內容淡出。 然后你需要用顯示器的另一個變化來dislay: none; - 之后的財產。

.item  {
  transition: 0.5s;
  opacity: 1;
}

.item.faded-out {
  opacity: 0;
}

Answer 2

Animate.css有幾個動畫可用於您的項目。 它也有淡入淡出 animation 。 它使用簡單，您只需將 class 名稱添加到您想要的元素。

另一種方法是使用以下代碼：

.fade-in {
animation: fadeIn ease 20s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}

Answer 3

Taking Bhavesh's suggestion by using Animate.css, using javascript is another solution by detecting the button click and adding/removing the class attributes of Animate.css. 下面顯示了如何執行此操作的示例代碼。

btn_next = document.querySelector("#btn_next");
btn_back = document.querySelector("#btn_back");

btn_next.addEventListener('click', () => { 
    form_group_2.classList.add('animate__animated', 'animate__fadeIn');
}) 

btn_back.addEventListener('click', () => { 
    form_group_2.classList.remove('animate__animated', 'animate__fadeIn');
    form_group_1.classList.add('animate__animated', 'animate__fadeIn');
}) 

其中form_group_1是父 div，按下按鈕后要隱藏的所有第一個表單組都將被隱藏。

另一種解決方案是使用函數而不是addEventListener 。

 <button class="btn-back" type="button" onclick="registerBack()">Back</button>
 <button class="btn-next" type="button"  onclick="registerNext()">Next</button>




function registerNext(){
    form_group_2.classList.add('animate__animated', 'animate__fadeIn');
}

function registerBack(){
    form_group_2.classList.remove('animate__animated', 'animate__fadeIn');
    form_group_1.classList.add('animate__animated', 'animate__fadeIn');
}