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 中制作表单的一个示例：

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

Answer 1

您应该尝试样式属性opacity。例如。当您添加faded-out-class 时，这样的样式表会使某些内容淡出。然后，您需要在此之后使用 dislay: none;-property 进行另一次更改。

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

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

Answer 2

Animate.css 有几个动画可用于您的项目。它也有淡入淡出动画。使用起来很简单，你只需要将类名添加到你想要的元素中。

替代方法是使用以下代码：

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

Answer 3

通过使用 Animate.css 采纳 Bhavesh 的建议，通过检测按钮单击和添加/删除 Animate.css 的类属性，使用 javascript 是另一种解决方案。下面显示了如何执行此操作的示例代码。

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');
}