3 种形式的 Javascript 动画切换

Question

目前我有两种形式。登录表格和注册表。我使用 Javascript Toggle 在它们之间切换。但现在我想添加第三种形式。我怎样才能做到这一点？所以我希望能够从登录表单切换到注册表单或切换到忘记密码表单，然后从这两个表单切换回登录表单。

现在您可以在我的 View 中看到我是如何做到的:

(我的部分 View 中唯一的东西是底部带有 a 标记的表单，用于激活 .js 代码)

<div class="login-page">
    <div class="form">
        <!--Login Form-->
        @{await Html.RenderPartialAsync("_LoginView"); }

        <!--Register Form-->
        @{await Html.RenderPartialAsync("_RegisterView"); }

    </div>
</div>

还有我的 .js 文件:

//Toggle between login and registration form
$('.switch a').click(function () {
$('form').animate({ height: "toggle", opacity: "toggle" }, "slow");
});

还有 .css 代码:

.register-form {
    display: none;
}

Answer 1

根据我从您的问题中获得的信息，我认为您的意图是为多种形式之间的切换设置动画。这将需要在 JavaScript 中编写更多逻辑。

基于你已经使用过的开关机制，我想出了这个解决方案:

$("a[data-toggle]").on("click", function(e) {
  var selector = $(this).data("toggle");
  if ($(selector).css('display') != 'block') {
    $('form').hide();
  }
  $(selector).animate({height: "toggle", opacity: "toggle"}, "slow");
});

.switch a {
  width: 100px;
  height: 20px;
  background: grey;
  text-align: center;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
}

form {
  width: 100px;
  height: 100px;
  display: none;
}

.form1 {
  background: red;
}

.form2 {
  background: blue;
}

.form3 {
  background: green;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"		  
			   crossorigin="anonymous"></script>
<div class="login-page">
  <div class="switch">
    <a data-toggle=".form1">Form1</a>
    <a data-toggle=".form2">Form2</a>
    <a data-toggle=".form3">Form3</a>
  </div>
  <div class="form">
    <form class="form1"></form>
    <form class="form2"></form>
    <form class="form3"></form>
  </div>
</div>

这是一种高效且易于实现的方式。您可以查看 jsFiddle here