登录滑块验证表单
Some of you might already know but for those who don’t, I’m starting a Weekly Coding Challenge with all of you! ?
你们中有些人可能已经知道了，但是对于那些不知道的人，我正在与大家一起发起每周编码挑战！ ？
This challenge is meant to help improve our coding skills by practicing on real-life projects.
这项挑战旨在通过在实际项目中进行练习来帮助提高我们的编码技能。
You can read more about this challenge and how you can join it by reading The Complete Guide.
您可以阅读《完整指南》 ，以了解有关此挑战以及如何加入挑战的更多信息。
Alright… so thechallengefor this week was:Create a Sign in or Sign up form (or both).
好吧……所以本周的挑战是：创建一个“登录”或“注册”表单(或同时创建两者)。
Below you can see a demo of what I’ve created:
在下面，您可以查看我创建的演示：
Truth to be told, I’ve struggled a bit with creating the animation ?, but in the end, I managed to make it work. ? I was inspired by this shot on Dribbble by SELECTO — they have some awesome designs, you should check them out!
说实话，我在制作动画方面有些挣扎，但是最后，我设法使它起作用。 ？ 我从ibbble博士和SE LECTO的这张照片中得到的启发-他们有一些很棒的设计，您应该检查一下！
项目介绍 (Project description)
Before we move to the actual code, I’d like to break down the things we’re going to have in the component. This will help as it will make the code we write much clearer.
在转到实际代码之前，我想对组件中要包含的内容进行分解。 这将有所帮助，因为它将使我们编写的代码更加清晰。
We have 4 smaller screens/boxes inside the main component (the.container):
我们在主要组件(.container)内部有4个较小的屏幕/框：
TheSign Inform
登录表单
TheSign Upform
注册表格
TheSign Inoverlay
登录覆盖
TheSign Upoverlay
注册覆盖
Also, at one moment in time you can see either:
此外，您会在某一时刻看到以下任一情况：
TheSign Inform alongside theSign Upoverlay
签到表格和签到叠加层
TheSign Upform alongside theSign Inoverlay
签到表格以及签到覆盖层
In theoverlaypanels, we have some text and abutton. By clicking it you will bring up the other combination of screens and vice-versa. Check the GIF above one more time to see what I mean.
在覆盖面板中，我们有一些文本和一个button。 通过单击它，将显示其他屏幕组合，反之亦然。 再检查一次以上的GIF，看看我的意思。
叠加动画-说明 (The overlay animation — explained)
This is where it might be a little trickier, but I’ll do my best to explain so you can understand the logic behind it.
这可能有点棘手，但是我会尽力解释，以便您了解其背后的逻辑。
We have the followinglayersfor the overlay component:
对于叠加层组件，我们具有以下几层：
The overlay-container— this will display thevisiblearea (more on this below) at a certain moment in time. It has awidthof50%of the total container's width.
overlay-container-这将在特定时间显示可见区域(下面有更多信息)。 它的width是容器总width的50%。
The overlay— this div has a doublewidthsize (200%) so it's taking the full width of the main container. (200% * 50%= 100%. The 50% is from the.overlay-containerabove).
叠加层-此div的width是其两倍大小(200%)，因此它占用了主容器的整个宽度。 (200% * 50%= 100%。50％来自上面的.overlay-container)。
The overlay-panels — are the divs which are holding the actual content (the text and the button) we see on the screen. They both have apositionofabsolute. We can position them wherever we want in the.overlaycomponent. One of the panels is positioned to theleftand the other one is positioned to theright. Both having a width of50%of the.overlaycomponent.
覆盖面板s是保存我们在屏幕上看到的实际内容(文本和按钮)的div。 他们俩都有absolute的position。 我们可以将它们放置在.overlay组件中的.overlay位置。 面板之一位于left，另一面板位于right。 两者的宽度均为.overlay分量的50%。
“Why do we need 3 layers?” you might ask… Well, let’s see how it would look like without the first layer:
“为什么我们需要三层？” 您可能会问...好吧，让我们看看没有第一层的情况：
In the picture above you can see that both of the panels are “visible”, which is not what we want. This is why we’re adding the.overlay-containerto act like a “focus area”. This allows us to hide the panel which isoverflowing, or which is out of its boundaries. This is why we needed the.overlayto be twice as big as the.overlay-container. By moving around the.overlay-container, which also has apositionofabsolute, we can hide or show which panel we want.
在上图中，您可以看到两个面板都是“可见的”，这不是我们想要的。 这就是为什么我们要添加.overlay-container以使其像“焦点区域”那样工作的原因。 这使我们可以隐藏正在溢出或超出其边界的面板。 这就是为什么我们需要.overlay两倍于.overlay-container。 通过在.overlay-container(也具有absoluteposition周围移动，我们可以隐藏或显示所需的面板。
It was a little bit confusing ?, I’ll admit, but I hope I made it clearer.
我承认这有点令人困惑，但我希望我能更清楚地说明。
表格动画-说明 (The forms animation — explained)
These aren’t difficult to understand at all. Basically, we have again two containers — the.form-containers. Each has awidthof50%and aposition-absolute. We move both of them at the same time from left to right. When they get behind the.overlay-containerfrom above (while these are moving) we quickly change thez-indexvalue. TheSign Upform (for example) will move on top of theSign Inform, and vice-versa. Magic to the eyes, but some code logic behind! ?
这些一点都不难理解。 基本上，我们又有两个容器.form-container。 每个都有50%的width和position-absolute。 我们同时将它们从左移到右。 当它们从上方.overlay-container后面时(它们在移动时)，我们会快速更改z-index值。 在注册的形式(例如)将在注册的顶部移动在形式上，和反之亦然。 神奇的眼睛，但背后有一些代码逻辑！ ？
HTML (The HTML)
Now that we have broken down the core “functionality” of the animation, it’s time to see the actual HTML code. Let’s start with the basic skeleton:
现在，我们已经分解了动画的核心“功能”，是时候查看实际HTML代码了。 让我们从基本框架开始：
<div class="container" id="container"><div class="form-container sign-up-container"><!-- Sign Up form code goes here --></div><div class="form-container sign-in-container"><!-- Sign In form code goes here --></div><div class="overlay-container"><!-- The overlay code goes here --></div></div>
The main div has a class of.containerand also an id ofcontainerbecause we want to target this element in the JavaScript (more on this below). ?
主div有一个.container类和一个containerID，因为我们要在JavaScript中定位此元素(请参见下文)。 ？
注册表格(The Sign Up form)
<div class="form-container sign-up-container"><form action="#"><h1>Create Account</h1><div class="social-container"><a href="#" class="social"><i class="fab fa-facebook-f"></i></a><a href="#" class="social"><i class="fab fa-google-plus-g"></i></a><a href="#" class="social"><i class="fab fa-linkedin-in"></i></a></div><span>or use your email for registration</span><input type="text" placeholder="Name" /><input type="email" placeholder="Email" /><input type="password" placeholder="Password" /><button>Sign Up</button></form></div>
登录表单(The Sign In form)
We also have a few classes on each div:
每个div上也有一些类：
<div class="form-container sign-in-container"><form action="#"><h1>Sign in</h1><div class="social-container"><a href="#" class="social"><i class="fab fa-facebook-f"></i></a><a href="#" class="social"><i class="fab fa-google-plus-g"></i></a><a href="#" class="social"><i class="fab fa-linkedin-in"></i></a></div><span>or use your account</span><input type="email" placeholder="Email" /><input type="password" placeholder="Password" /><a href="#">Forgot your password?</a><button>Sign In</button></form></div>
The.form-containerclass will contain the CSS which is duplicated for both the.sign-in-containerand.sign-up-containerclasses;
.form-container类将包含为.sign-in-container和.sign-up-container类复制CSS。
the 2 different classes (mentioned above) will contain the CSS which is different.2个不同的类(如上所述)将包含不同CSS。
This way we avoid having to write the same CSS code twice and we use the power of being able to add multiple classes.
这样，我们避免了必须编写两次相同CSS代码，并且可以添加多个类。
You might have also noticed that theitags have some classes. These are because we are using FontAwesome for the icons. Read more about them on their website.
您可能还注意到i标记具有一些类。 这是因为我们将FontAwesome用于图标。 在其网站上了解有关它们的更多信息。
覆盖容器(The overlay container)
<div class="overlay-container"><div class="overlay"><div class="overlay-panel overlay-left"><h1>Welcome Back!</h1><p>To keep connected with us please login with your personal info</p><button class="ghost" id="signIn">Sign In</button></div><div class="overlay-panel overlay-right"><h1>Hello, Friend!</h1><p>Enter your personal details and start journey with us</p><button class="ghost" id="signUp">Sign Up</button></div></div></div>
Same as above, we have a common class.overlay-paneland two different classes:.overlay-leftand.overlay-right. Also, we haveids for the buttons as we're going to add anonClickeventListenerfor both of them in theJavaScript.
与上面相同，我们有一个通用类.overlay-panel和两个不同的类：.overlay-left和.overlay-right。 另外，我们在按钮上有id，因为我们将在JavaScript为它们两个添加onClickeventListener。
JavaScript (The JavaScript)
Usually, we cover the CSS before the JS part, but this time it is easier to show and explain the JavaScript code first. It will help you understand the CSS we’re going to have later on.
通常，我们在JS部分之前介绍CSS，但是这次更容易显示和解释JavaScript代码。 它将帮助您了解稍后将要使用CSS。
const signUpButton = document.getElementById('signUp');const signInButton = document.getElementById('signIn');const container = document.getElementById('container');signUpButton.addEventListener('click', () => {container.classList.add('right-panel-active');});signInButton.addEventListener('click', () => {container.classList.remove('right-panel-active');});
As explained above, we add the event listeners. When the buttons are clicked weaddorremovethe.right-panel-activeclass (not the best name for the class, but it’s the best I got at the moment ?). This class will be used to style the subcomponents differently as we have two screens.
如上所述，我们添加了事件监听器。 单击按钮时，我们add或remove.right-panel-active类(不是该类的最佳名称，但这是我目前获得的最好的名称吗？)。 由于我们有两个屏幕，因此该类将用于对子组件进行不同的样式设置。
CSS (The CSS)
First, we have the base CSS for the basic components:
首先，我们有基本组件的基本CSS：
h1 {font-weight: bold;margin: 0;}p {font-size: 14px;font-weight: 100;line-height: 20px;letter-spacing: 0.5px;margin: 20px 0 30px;}span {font-size: 12px;}a {color: #333;font-size: 14px;text-decoration: none;margin: 15px 0;}button {border-radius: 20px;border: 1px solid #ff4b2b;background-color: #ff4b2b;color: #ffffff;font-size: 12px;font-weight: bold;padding: 12px 45px;letter-spacing: 1px;text-transform: uppercase;transition: transform 80ms ease-in;}button:active {transform: scale(0.95);}button:focus {outline: none;}button.ghost {background-color: transparent;border-color: #ffffff;}form {background-color: #ffffff;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 50px;height: 100%;text-align: center;}input {background-color: #eee;border: none;padding: 12px 15px;margin: 8px 0;width: 100%;}.social-container {margin: 20px 0;}.social-container a {border: 1px solid #dddddd;border-radius: 50%;display: inline-flex;justify-content: center;align-items: center;margin: 0 5px;height: 40px;width: 40px;}
Few things to note here:
这里要注意的几件事：
We are styling the elements directly (h1, p, a). Usually, you wouldn’t do that as it might get mixed up with other styles, so it’s good to add a class to each of them. But for this example it’s working ok because we only have these elements on the page.我们正在直接设计元素的样式(h1，p，a)。 通常，您不会这样做，因为它可能会与其他样式混合在一起，因此最好为每个样式添加一个类。 但是对于此示例，它可以正常工作，因为我们在页面上仅包含这些元素。
We have a littletransitionon thebutton. When it's clicked, theactivestate is triggered so we make it a little smaller. Nice and simple clicking effect ?!
我们在button上有一点transition。 单击它时，将激活活动状态，因此我们将其减小了一点。 好的简单点击效果？
Theformis aflexcontainer as we want to center everything within it, and it's easy to do that withflexbox. You'll see below that it's used a few more times.
该form是一个flex容器，因为我们想将其中的所有内容居中放置，而使用flexbox则很容易做到这flexbox。 您会在下面看到它已经使用了几次。
The.containerCSS:
.containerCSS：
.container {background-color: #ffffff;border-radius: 10px;box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);position: relative;overflow: hidden;width: 768px;max-width: 100%;min-height: 480px;}
Relativepositioned because we'll haveabsolutepositioned children elements (explained why, above).
Relative定位，因为我们将有absolute定位的子元素(在上面解释了原因)。
Overflowis set tohiddenbecause we have set aborder-radiusand we don't want the child elements to break this radius and be displayed outside of the.container.
Overflow设置为hidden因为我们已经设置了border-radius并且我们不希望子元素超出此半径并显示在.container之外。
Now for the fun part, the.form-containerand related styles:
现在，有趣的部分是.form-container和相关样式：
.form-container {position: absolute;top: 0;height: 100%;transition: all 0.6s ease-in-out;}.sign-in-container {left: 0;width: 50%;z-index: 2;}.sign-up-container {left: 0;width: 50%;opacity: 0;z-index: 1;}.container.right-panel-active .sign-in-container {transform: translateX(100%);}.container.right-panel-active .sign-up-container {transform: translateX(100%);opacity: 1;z-index: 5;animation: show 0.6s;}@keyframes show {0%,49.99% {opacity: 0;z-index: 1;}50%,100% {opacity: 1;z-index: 5;}}
Notethe following:
请注意以下几点：
Theanimation(show) which is responsible for changing thez-indexof the.form-containers as discussed above. We go by having the z-index1from0-49.99%and having it at5from50-100%. These ranges are used because we want them to change fast.
如上所述，animation(show)负责更改.form-container的z-index。 我们通过将z-index设置为0-49.99%并将1设置为5设置50-100%。 使用这些范围是因为我们希望它们快速变化。
We use the.right-panel-activeclass to move around the.form-containers when the buttons are clicked.
当单击按钮时，我们使用.right-panel-active类在.form-container移动。
And finally, the.overlay-containerand related styles:
最后，.overlay-container和相关样式：
.overlay-container {position: absolute;top: 0;left: 50%;width: 50%;height: 100%;overflow: hidden;transition: transform 0.6s ease-in-out;z-index: 100;}.container.right-panel-active .overlay-container {transform: translateX(-100%);}.overlay {background: #ff416c;background: -webkit-linear-gradient(to right, #ff4b2b, #ff416c);background: linear-gradient(to right, #ff4b2b, #ff416c);background-repeat: no-repeat;background-size: cover;background-position: 0 0;color: #ffffff;position: relative;left: -100%;height: 100%;width: 200%;transform: translateX(0);transition: transform 0.6s ease-in-out;}.container.right-panel-active .overlay {transform: translateX(50%);}.overlay-panel {position: absolute;display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 40px;text-align: center;top: 0;height: 100%;width: 50%;transform: translateX(0);transition: transform 0.6s ease-in-out;}.overlay-left {transform: translateX(-20%);}.container.right-panel-active .overlay-left {transform: translateX(0);}.overlay-right {right: 0;transform: translateX(0);}.container.right-panel-active .overlay-right {transform: translateX(20%);}
the.overlayhas a gradient background, I used UI Gradients to get it;
.overlay具有渐变背景，我使用UI Gradients来获取它；
.overlay-leftand.container.right-panel-active .overlay-righthave a-20%and20%translation on the X-axis. This is because I wanted to add a little effect to the text when it's displayed as if it's coming from outside (sort of) ?;
.overlay-left和.container.right-panel-active .overlay-right在X轴上有-20%和20%平移。 这是因为我想在文本显示时好像从外面(有点)来增加一点效果？
Other than that… Nothing! We covered everything. We’re done! ?
除此之外……什么都没有！ 我们涵盖了所有内容。 大功告成！ ？
结论 (Conclusion)
This post was a little tough on animations, wasn’t it? ? Nevertheless, I hope you’ve learned something from it.
这篇文章在动画方面有点强硬，不是吗？ ？ 不过，我希望您从中学到了一些东西。
Don’t forget that you can participate too in the Weekly Coding Challenge by creating your own version of theSign in/up Form.Share it with me on Twitter: @florinpop1705 so I can see it!
不要忘记，您也可以通过创建自己的版本的“登录/注册表格”来参加“ 每周编码挑战”。在Twitter上与我分享： @ florinpop1705，这样我就可以看到它！
Also, you can suggest what we should build for the next Challenge in this Google Form.
另外，您可以在此Google表单中建议我们应对下一次挑战的基础。
You can find the live version of the project we’ve built on Codepen.
您可以找到我们在Codepen上构建的项目的实时版本。
Thank you for spending your time reading this ?, I hope that you learned something new!
谢谢您花费时间阅读这篇文章，希望您能学到新知识！
Originally published at www.florin-.
最初在www.florin-上发布。
翻译自: /news/how-to-build-a-double-slider-sign-in-and-sign-up-form-6a5d03612a34/
登录滑块验证表单
