javascript - 页面上的部分转换
问题描述
我正在尝试在单页应用程序的部分之间设置转换,它们都在同一页面上,但其他部分设置为不显示,因此当我执行事件时,为请求的部分切换显示不显示,现在我不'不只是希望该部分像那样进入,而是设置一个超时,这会使进入的部分不会立即进入,而是在 5s 之后,我该如何实现这一点,我已经尝试过 settimeout 但它似乎不起作用大纲问题的
除一个以外的所有部分都没有显示,
在没有显示无的页面上执行事件以引入请求的部分并切换显示无
根据页面请求,页面转换或超时,因此页面不会立即进入下面的代码,HTML
HTML
<div class="main-container">
<div class="page padding main" id="page-main">
<div class="modal hidden">
<button class="btn-close-modal">×</button>
<h2 class="modal-header">Login to your account</h2>
<form class="modal-form">
<div>
<label for="">Username:</label>
<input type="text" />
</div>
<div>
<label for="">Password:</label>
<input type="text" />
</div>
<button class="btn header-button">Login →</button>
</form>
</div>
<div class="overlay hidden"></div>
<nav class="header-nav">
<a href="#" class="header-img">
<svg viewBox="0 0 256 256" class="header-svg">
<path
class="path"
d="m 15.625507,46.199537 55.767886,-32.030352 55.623047,32.281229 -0.14485,64.311586 0.14485,-64.311586 55.76788,-32.030352 55.62305,32.281229 -0.14485,64.311579 -55.76788,32.03036 -55.62305,-32.28123 55.62305,32.28123 -0.14485,64.31158 -55.76788,32.03035 L 70.958866,207.10393 71.103708,142.79235 126.87159,110.762 71.103708,142.79235 15.480664,110.51112 Z"
style="
fill: none;
stroke: #000;
stroke-width: 13;
stroke-linejoin: round;
stroke-linecap: round;
"
/>
</svg>
</a>
<button
class="header-button login"
type="button"
data-page="page-login"
>
LOGIN
</button>
</nav>
<div class="header-hero">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="header-text">
<h1 class="header-text-description">
Make Banking Easy with Express
</h1>
<p class="header-text-texts">
Together we can make banking awesome!
</p>
<p class="header-text-texts">
Use our mobile app to your need today
</p>
<button class="header-button header-buttons" type="button">
<a href="">Services</a>
</button>
</div>
<div class="header-image hide-for-desktop">
<img src="./assets/hand.jpg" alt="" class="header-hand" />
<button class="header-image-1">Transfer</button>
<button class="header-image-2">Loan</button>
</div>
</div>
<div class="page u-none" id="page-login">
<nav>
<a data-page="page-dashboard">User Settings</a>
<a data-page="page-main">Logout</a>
</nav>
<h1>MAIN PAGE</h1>
<form action="" name="login" method="" id="form-id" required>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="pin">Pin</label>
<input type="text" id="pin" />
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-signup">
<nav>
<a data-page="page-settings">User Settings</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>MAIN PAGE</h1>
<form action="" name="login" method="" id="form-id" required>
<label for="name">Name</label>
<input type="text" id="name" />
<label for="pin">Pin</label>
<input type="text" id="pin" />
<button type="submit" class="submit">Submit</button>
</form>
</div>
<div class="page u-none" id="page-dashboard">
<nav>
<a data-page="page-main">Back to Main</a>
<a data-page="page-login">Logout</a>
</nav>
<h1>SETTINGS PAGE</h1>
</div>
</div>
CSS
nav {
display: flex;
}
nav a {
color: #00f;
padding: 5px 10px;
cursor: pointer;
}
/* Utility classes */
.u-none {
display: none;
opacity: 0;
animation: 2s fadeIn forwards;
}
@keyframes fadeIn {
100% {
opacity: 1;
display: block;
}
}
Javascript
const ELS_pages = document.querySelectorAll('.page');
const ELS_buttons = document.querySelectorAll('[data-page]');
console.log(ELS_pages);
console.log(ELS_buttons);
const submit = document.querySelector('.submit');
const goToPage = (id) => {
ELS_pages.forEach((EL, i) => {
// console.log(EL.id);
console.log(`${i} : ${EL.id}`);
console.log(id);
// EL.classList.toggle("u-none", EL.id !== id);
setTimeout(() => {
if (EL.id === id) {
EL.classList.remove('u-none');
} else {
EL.classList.add('u-none');
}
}, 20);
});
};
// goToPage("page-main");
ELS_buttons.forEach((EL) =>
EL.addEventListener('click', () => {
goToPage(EL.dataset.page);
})
);
解决方案
我通过在添加和删除分类样式上设置计时器来解决此问题,并且它与我选择的内容一起使用。下面的代码
const goToPage = (id) => {
ELS_pages.forEach((EL, i) => {
// console.log(EL.id);
console.log(`${i} : ${EL.id}`);
console.log(id);
// EL.classList.toggle("u-none", EL.id !== id);
if (EL.id === id) {
setTimeout(() => {
EL.classList.remove('u-none');
}, 2000);
} else {
setTimeout(() => {
EL.classList.add('u-none');
}, 2000);
}
});
};
推荐阅读
- sql - 如何创建汇总表?
- c# - 向现有 ASP .NET Core 2.1 MVC 应用程序添加 Blazor 支持
- geolocation - App Store中的Phonegap地理位置不起作用
- mongodb - 将具有不同键的数据组合到一个集合中会影响查询性能吗?
- typescript - TypeScript 推断从不输入,但需要赋值
- php - Symfony 3.4:路由匹配但在 url 中找不到路由
- java - Google maps custom marker too large
- java - 如何确定流中各种函数的输入值
- python - 从 scipy.spatial.Voronoi 有效地确定 Voronoi 图中的相邻单元格
- python - What is the way of adding a word to the line below using regular expression in python?