Question

我有两个部分，另一个部分。我想做的是，当我单击按钮时，第一部分显示：没有一个小过渡，第二部分出现。我在学习时需要使用香草JavaScript。

我的目标是能够在输入密码后创建登录名，此人将移至第二部分。（这仅用于前端，不用于后端）。

这是下面的代码：

 Completable single = server.rxClose();

    // Subscribe to bind the server
    single.
      subscribe(
        () -> {
          // Server is closed
        },
        failure -> {
          // Server closed but encoutered issue
        }
      );

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Login Background */
#first{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #464159;
    z-index: 1;
}
    /* Login */
.login-container{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo{
    justify-content: center;
    margin-right: 20px;
}

.logo img{
    width: 180px;
    height: auto;
}

.user{
    display: flex;
    flex-direction: column;
}

.w8u{
    color: white;
    font-size: 15px;
    margin: 0 0 10px 0;
}

.submit{
    flex: 1;
    margin: 30px 0 0 10px;
}

/* Menu */

 #second{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: orangered;
    z-index: -1;
}

Answer 1

是的，您可以使用JavaScript更改元素的CSS：

function login(){
document.getElementById("first").style.display="none";
document.getElementById("second").style.display="block";
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Login Background */
#first{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: #464159;
    z-index: 1;
}
    /* Login */
.login-container{
    position: absolute;
    top: 50%;
    right: 50%;
    transform: translate(50%, -100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo{
    justify-content: center;
    margin-right: 20px;
}

.logo img{
    width: 180px;
    height: auto;
}

.user{
    display: flex;
    flex-direction: column;
}

.w8u{
    color: white;
    font-size: 15px;
    margin: 0 0 10px 0;
}

.submit{
    flex: 1;
    margin: 30px 0 0 10px;
}

/* Menu */

 #second{
    position: absolute;
    width: 100%;
    height: 100vh;
    background-color: orangered;
    z-index: -1;
}

<body>
    
        <section id="first">
            <div class="login-container">
                <!-- Logo User -->
                <div class="logo">
                    <img src="w-logo.jpg" alt="User">
                </div>
                <!-- User Name -->
                <div class="user">
                    <div class="w8u">
                        <h3>User</h3>
                    </div>
                    <div>
                        <input class="input" type="password" placeholder="Enter your password" required>
                    </div>
                </div>
                <!-- Submit Button -->
                <button id="btn-submit" class="submit" type="submit" onclick="login()">GO!</button>
        </section>
    
        <section id="second">
          Section  2
        </section>
    
        <script>

        </script>
</body>

Answer 2

简短答案：

您可以在JavaScript中使用常见的样式过渡和切换类模式来解决您的问题。

/* Get Screen Container */
let context = document.querySelector("main.screen-container");

/* Helper Methods */ 

// Utility
const ele = context.querySelector.bind(context), 
      eles = context.querySelectorAll.bind(context);

// Action 
const showScreen = inactiveScreen => {
  const screens = eles(".screen");
  screens.forEach(screen => screen.classList.remove("active-screen"));
  inactiveScreen.classList.add("active-screen");
}

// Elements
const login_button = ele("#loginBtn"),
      logout_button = ele("#logoutBtn"),

      login_screen = ele("#login"),
      loggedIn_screen = ele("#loggedIn");


// Add Event Listeners and Handlers
login_button.addEventListener("click", () => showScreen(loggedIn_screen));
logout_button.addEventListener("click", () => showScreen(login_screen));

.full-width-full-height {
  width: 100%;
  height: 100%;
}
.no-overflow {
  overflow: hidden;
}
.inputs-container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 200px;
 padding: 5px;
 border: 5px black solid;
}

.inputs-container.inputs {
  padding: 10px;
}


.screen#login {
  display: flex;
  justify-content: center;

}

.screen#loggedIn {
  background: rgba(0,0,0,.5);
  border: 5px solid rgba(0,0,0,.3);
  text-align: center;
}

highlight {
  color: rgb(0,100,0); 
  text-shadow: 3px 3px 10px rgb(0,200,0);
}

.screen-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

main section {
 position: absolute;
 height: 0px;
 width: 0px;
 opacity: 0;
 transition: all .3s ease-in-out;
}

main section.active-screen {
  height: 100%;
  width: 100%;
  opacity: 1;
}

<body class="full-width-full-height no-overflow">
<main class="screen-container full-width-full-height">

<section id="login" class="screen active-screen">
<div class="inputs-container">
<div class="inputs"><label>Username:</label><input type="text" id="username" placeholder="admin" /></div>
<div class="inputs"><label>Password:</label><input type="password" id="password" /></div>
<button id="loginBtn">login</button>
</div>
</section>
<section id="loggedIn" class="screen">
<h3>User Successfully <highlight>Logged In</highlight></h3>
<button id="logoutBtn">logout</button>
</section>

</main>
</body>

答案解释：

在您的问题中，您需要以下帮助：

在应用程序中将节用作不同的屏幕
- 更改事件的屏幕，例如点击
- 屏幕切换时屏幕之间的转换

像这样的事情并不是非典型的需求，实际上，只要看一下上面的内容，您就会发现您正在寻找的内容与诸如轮播或标签导航之类的常见事物之间的相似之处。

由于是这种情况，因此基于这些类型的需求设计标记时有一个非常常见的模式，并且该模式用于BootStrap，DataTables，JQuery等框架中。

标记模式：

创建一个容器
- 提供一个 class 来定义这种类型的容器（ screen-container ）
创建视觉元素
- 在您的情况下，Section Elements称为 Screens
- 提供一个 class 来定义这些特定元素
- 您的情况类似屏幕
- 您可能还希望根据这些视觉元素的内容为其提供ID。
  - 在您的情况下，类似 login 和 loggedIn
创建一个可用作 active 可视元素的类
- 在您的情况下，类似活动屏幕

结合以上内容，您将获得基本概述：

<main class="screen-container">

<section id="login" class="screen active-screen"></section>
<section id="loggedIn" class="screen"></section>

</main>

示例：

html, body, main, .screen-container {
 height: 100%;
 width: 100%;
}


.screen-container 
  .screen {
    padding: 3px;
    background: rgba(24,24,24, .3);
    border: 3px solid black;
    width: 100px;
    height: 100px;
}

.screen-container 
  .screen.active-screen {
    border-color: green;
 }

<main class="screen-container">

<section id="login" class="screen active-screen">login</section>
<section id="loggedIn" class="screen">logged in</section>

</main>

样式：

在最初的问题中，您说要使用 display 属性来隐藏和显示屏幕，但是，您还声明希望拥有屏蔽从一个屏幕到另一个屏幕的过渡。

通过适当命名的CSS transition属性（More info on MDN）绝对可以进行转换。

问题是 display 属性无法设置动画。如果将元素配置为display: none;，则会立即重新粉刷页面，并删除该元素。

这意味着您需要使用其他属性，我们通常会使用opacity或visibility。这是这三个之间的区别：

display: none;
- 立即折叠元素
- 从视图中删除该元素。
- 不允许过渡。
visibility: hidden;
- 不折叠元素
  - 它占用的空间为空白。
- 从视图中删除元素
- 允许转换
  - 该元素仍会弹出不可见。
opacity: 0;
- 不折叠元素
  - 它占用的空间为空白。
- 从视图中删除元素
- 允许进行转换。
  - 该元素将逐渐消失，直到不可见为止。

以下是这些属性影响页面布局的不同方式的示例：

const context = document.querySelector("#examples");

const ele = context.querySelector.bind(context),
      hide = section => section.classList.toggle("hide"),
      onClickHide = (btn, section) => btn.addEventListener("click", () => hide(section));

  opacity = ele(".opacity"),
  opacity_button = ele("#oBtn"),
  
  visibility = ele(".visibility"),
  visibility_button = ele("#vBtn"),
  
  display = ele(".display"),
  display_button = ele("#dBtn"),
  
  toggle_button = ele("#tBtn");
  

onClickHide(opacity_button, opacity);
onClickHide(visibility_button, visibility);
onClickHide(display_button, display);

toggle_button
  .addEventListener("click", function() {
  hide(opacity); 
  hide(visibility);
  hide(display);
});

html,
body,
#examples {
  width: 100%;
  height: 100%;
  box-sizing: content-box;
  margin: 0px;
  padding: 0px;
}

#examples section {
display: flex;
flex-direction: column;
  width: 100px;
  height: 100px;
  border: 5px solid black;
  margin: 5px;
  transition: all .5s ease-in-out;
}

#examples section.hide {
  border-radius: 100px;
}
#examples section.opacity {
  background-color: blue;
  color: white;
}

#examples section.opacity.hide {
  opacity: 0;
}

#examples section.visibility {
  background-color: purple;
  color: white;
}

#examples section.visibility.hide {
  visibility: hidden;
}

#examples section.display {
display: block;
  background-color: red;
  color: white;
}

#examples section.display.hide {
color: black;
  display: none;
}

<main id="examples">
  <section class="opacity">opacity <button id="oBtn">hide</button></section>
  <hr />
  <section class="visibility">visibility <button id="vBtn">hide</button></section>
  <hr />
  <section class="display">display <button id="dBtn">hide</button></section>
  <hr/>
  <button id="tBtn">Toggle All</button>
</main>

注意：：在上面，实际上有两个属性转换-opacity，visibility或display-和 { {1}}。您应该首先注意到在border-radius示例中如何根本看不到display的变化，其次是border-radius示例是唯一崩溃的示例元素，使其不再占用空间。

正在应用过渡：

通过将display与opacity: 0;结合使用，我们可以从页面上直观地删除该元素，同时还消除了它对其他元素的影响-意味着它不会占用空间和可以过渡。

height: 0px; width: 0px;

setInterval(function() {
  const screens = [
    document.querySelector(".screen.active-screen"),
    document.querySelector(".screen:not(.active-screen)")
  ];
  screens[0].classList.toggle("active-screen");
  screens[0].ontransitionend = () => { 
  screens[1].classList.toggle("active-screen"); 
  screens[0].ontransitionend = undefined;
  }
}, 1000)

html,
body,
main,
.screen-container {
  height: 100%;
  width: 100%;
}

.screen-container .screen {
  transition: all .3s ease-in-out;
  opacity: 0;
  height: 0px;
  width: 0px;
}

.screen-container .screen.active-screen {
  background: rgba(24, 24, 24, .3);
  border: 3px solid black;
  padding: 3px;
  border-color: green;
  width: 100px;
  height: 100px;
  opacity: 1;
}

JavaScript

难题的最后一部分是屏幕的JavaScript机制。

任何程序员都希望使切换尽可能容易，通常是通过提供一种功能来实现的，方法是通过从当前活动屏幕中删除类<main class="screen-container"> <section id="login" class="screen active-screen">login</section> <section id="loggedIn" class="screen">logged in</section> </main>并将其应用到屏幕上来快速重新分配类active-screen。所需的视觉元素。

要考虑的一件事是，您希望对元素的查询尽可能具体。就是说，您想提供最小的上下文而不是document.querySelector来查找可视元素。

/* Get Screen Container */
let context = document.querySelector("main.screen-container");

/* Helper Methods */ 

// Utility
const ele = context.querySelector.bind(context), 
      eles = context.querySelectorAll.bind(context);

这可以防止代码冲突，在这种情况下，应用程序的JavaScript，样式或标记中的其他代码可以利用与内容无关的screen或active-screen类你在这里。

注意：这实际上是当前BootStrap中的问题。它在Tab结构中搜索active类。这是一个通用的类名，以至于其他库都在使用它，这可能使工作变得很头疼。我会尽快避免因为您没有充分考虑整个设计而编写显式修补程序，因此请尝试牢记与其他代码的交互性。

最后，我们编写了功能（showScreen，该功能可以在屏幕之间快速，轻松地切换：

// Action 
const showScreen = inactiveScreen => {
  const screens = eles(".screen");
  screens.forEach(screen => screen.classList.remove("active-screen"));
  inactiveScreen.classList.add("active-screen");
}

信不信由你，那就差不多了！

剩下要做的就是将此功能应用于您的button click 事件，它的工作原理与应该的一样：

结果：

/* Get Screen Container */
let context = document.querySelector("main.screen-container");

/* Helper Methods */ 

// Utility
const ele = context.querySelector.bind(context), 
      eles = context.querySelectorAll.bind(context);

// Action 
const showScreen = inactiveScreen => {
  const screens = eles(".screen");
  screens.forEach(screen => screen.classList.remove("active-screen"));
  inactiveScreen.classList.add("active-screen");
}

// Elements
const login_button = ele("#loginBtn"),
      logout_button = ele("#logoutBtn"),

      login_screen = ele("#login"),
      loggedIn_screen = ele("#loggedIn");


// Add Event Listeners and Handlers
login_button.addEventListener("click", () => showScreen(loggedIn_screen));
logout_button.addEventListener("click", () => showScreen(login_screen));

.full-width-full-height {
  width: 100%;
  height: 100%;
}
.no-overflow {
  overflow: hidden;
}
.inputs-container {
 display: flex;
 flex-direction: column;
 justify-content: center;
 height: 200px;
 padding: 5px;
 border: 5px black solid;
}

.inputs-container.inputs {
  padding: 10px;
}


.screen#login {
  display: flex;
  justify-content: center;

}

.screen#loggedIn {
  background: rgba(0,0,0,.5);
  border: 5px solid rgba(0,0,0,.3);
  text-align: center;
}

highlight {
  color: rgb(0,100,0); 
  text-shadow: 3px 3px 10px rgb(0,200,0);
}

.screen-container {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 0px;
  margin: 0px;
}

main section {
 position: absolute;
 height: 0px;
 width: 0px;
 opacity: 0;
 transition: all .3s ease-in-out;
}

main section.active-screen {
  height: 100%;
  width: 100%;
  opacity: 1;
}

<body class="full-width-full-height no-overflow">
<main class="screen-container full-width-full-height">

<section id="login" class="screen active-screen">
<div class="inputs-container">
<div class="inputs"><label>Username:</label><input type="text" id="username" placeholder="admin" /></div>
<div class="inputs"><label>Password:</label><input type="password" id="password" /></div>
<button id="loginBtn">login</button>
</div>
</section>
<section id="loggedIn" class="screen">
<h3>User Successfully <highlight>Logged In</highlight></h3>
<button id="logoutBtn">logout</button>
</section>

</main>
</body>

结论：

我希望这会有所帮助，并让您深入了解如何使用此模式！这不是一件很难的事情，但是它非常有用！

祝你好运，编码愉快！

有没有办法使用Vanilla JavaScript从一个部分跳到另一个部分？

2 个答案:

简短答案：

答案解释：

示例：

正在应用过渡：

结果：

结论：