这个jquery代码片段的vanilla JavaScript等价物是什么

Question

该代码用于在注册和登录之间切换表单。想用普通的javascript编写它。

$('.message a').click(function(){
    $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

网页代码

<div class="form">
  <form class="register-form">
    <input type="text" placeholder="first name" />
    <input type="text" placeholder="last name" />
    <input type="password" placeholder="password" />
    <input type="text" placeholder="email address" />
    <input type="text" placeholder="mobile number" />
    <button>create</button>
    <p class="message">Already registered? <a href="#">Sign In</a></p>
  </form>
  <form class="login-form">
    <input type="text" placeholder="Email" />
    <input type="password" placeholder="Password" />
    <button>login</button>
    <p class="message">Not registered? <a href="#">Create an account</a></p>
  </form>
</div>

Js 暂时

const formToggle = document.querySelector('.message a');

我希望在单击表单切换时交换表单

Answer 1

如果你可以用css进行转换，你可以做如下的事情：

var btn = document.querySelector('.btn');
var form = document.querySelector('.form');
btn.onclick = function() {
  form.classList.toggle('closed');
}

form {
  max-height: 300px;
  opacity:1;
  overflow:hidden;
  transition: all 1s;
}
form.closed{
   opacity:0;
    max-height: 0px;
}

<form class="form">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
</form>
<button class="btn">click</button>