登录滑块验证表单

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 .

您可以阅读 ，以了解有关此挑战以及如何加入挑战的更多信息。

Alright… so the challenge for 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 Dry SE they have some awesome designs, you should check them out!

说实话，我在制作动画方面有些挣扎，但是最后，我设法使它起作用。 ？ 我从博士和SE 的这张照片中得到的启发他们有一些很棒的设计，您应该检查一下！

项目介绍 (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个较小的屏幕/框：

1. The Sign In form

   登录表单

2. The Sign Up form

   注册表格

3. The Sign In overlay

   登录覆盖

4. The Sign Up overlay

   注册覆盖

Also, at one moment in time you can see either:

此外，您会在某一时刻看到以下任一情况：

• The Sign In form alongside the Sign Up overlay

  签到表格和签到叠加层

• The Sign Up form alongside the Sign In overlay

  签到表格以及签到覆盖层

In the overlay panels, we have some text and a button. 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 following layers for the overlay component:

对于叠加层组件，我们具有以下几层 ：

The overlay-container — this will display the visible area (more on this below) at a certain moment in time. It has a width of 50% of the total container's width.

overlay-container-这将在特定时间显示可见区域(下面有更多信息)。 它的width是容器总width的50% 。

The overlay — this div has a double width size (200%) so it's taking the full width of the main container. (200% * 50%= 100%. The 50% is from the .overlay-container above).

叠加层 -此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 a position of absolute. We can position them wherever we want in the .overlay component. One of the panels is positioned to the left and the other one is positioned to the right. Both having a width of 50% of the .overlay component.

覆盖面板 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-container to act like a “focus area”. This allows us to hide the panel which is overflowing, or which is out of its boundaries. This is why we needed the .overlay to be twice as big as the .overlay-container. By moving around the .overlay-container, which also has a position of absolute, we can hide or show which panel we want.

在上图中，您可以看到两个面板都是“可见的”，这不是我们想要的。 这就是为什么我们要添加.overlay-container以使其像“焦点区域”那样工作的原因。 这使我们可以隐藏正在溢出或超出其边界的面板。 这就是为什么我们需要.overlay两倍于.overlay-container 。 通过在.overlay-container (也具有absolute position周围移动，我们可以隐藏或显示所需的面板。

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 a width of 50% and a position - absolute. We move both of them at the same time from left to right. When they get behind the .overlay-container from above (while these are moving) we quickly change the z-index value. The Sign Up form (for example) will move on top of the Sign In form, 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代码了。 让我们从基本框架开始：

The main div has a class of .container and also an id of container because we want to target this element in the JavaScript (more on this below). ?

主div有一个.container类和一个container ID，因为我们要在JavaScript中定位此元素(请参见下文)。 ？

注册表格 (The Sign Up form)

    
    
     
        
      
Create Account
        
      
            
                   
                   
               
      
        
      or use your email for registration        
              
              
              
      Sign Up    
     
    

登录表单 (The Sign In form)

We also have a few classes on each div:

每个div上也有一些类：

    
    
     
        
      
Sign in
        
      
            
                   
                   
               
      
        
      or use your account        
              
              
      Forgot your password?        
      Sign In    
     
    

• The .form-container class will contain the CSS which is duplicated for both the .sign-in-container and .sign-up-container classes;

  .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 the i tags have some classes. These are because we are using for the icons. Read more about them on their website.

您可能还注意到i标记具有一些类。 这是因为我们将用于图标。 在其网站上了解有关它们的更多信息。

覆盖容器 (The overlay container)

    
    
     
        
      
            
       
Welcome Back!
            
       
                To keep connected with us please login with your personal info            
            
       Sign In        
      
        
      
            
       
Hello, Friend!
            
       
Enter your personal details and start journey with us
            
       Sign Up        
      
    
     
    

Same as above, we have a common class .overlay-panel and two different classes: .overlay-left and .overlay-right. Also, we have ids for the buttons as we're going to add an onClick eventListener for both of them in the JavaScript.

与上面相同，我们有一个通用类.overlay-panel和两个不同的类： .overlay-left和.overlay-right 。 另外，我们在按钮上有id ，因为我们将在JavaScript为它们两个添加onClick eventListener 。

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 we add or remove the .right-panel-active class (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:

这里要注意的几件事：

1. 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)。 通常，您不会这样做，因为它可能会与其他样式混合在一起，因此最好为每个样式添加一个类。 但是对于此示例，它可以正常工作，因为我们在页面上仅包含这些元素。

2. We have a little transition on the button. When it's clicked, the active state is triggered so we make it a little smaller. Nice and simple clicking effect ?!

   我们在button上有一点transition 。 单击它时，将激活活动状态，因此我们将其减小了一点。 好的简单点击效果？

3. The form is a flex container as we want to center everything within it, and it's easy to do that with flexbox. You'll see below that it's used a few more times.

   该form是一个flex容器，因为我们想将其中的所有内容居中放置，而使用flexbox则很容易做到这flexbox 。 您会在下面看到它已经使用了几次。

The .container CSS:

.container CSS：

.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;}

• Relative positioned because we'll have absolute positioned children elements (explained why, above).

  Relative定位，因为我们将有absolute定位的子元素(在上面解释了原因)。

• Overflow is set to hidden because we have set a border-radius and 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-container and 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;    }}

Note the following:

请注意以下几点：

1. The animation (show) which is responsible for changing the z-index of the .form-containers as discussed above. We go by having the z-index 1 from 0-49.99% and having it at 5 from 50-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% 。 使用这些范围是因为我们希望它们快速变化。

2. We use the .right-panel-active class to move around the .form-containers when the buttons are clicked.

   当单击按钮时，我们使用.right-panel-active类在.form-container移动。

And finally, the .overlay-container and 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 .overlay has a gradient background, I used to get it;

  .overlay具有渐变背景，我使用来获取它；

• .overlay-left and .container.right-panel-active .overlay-right have a -20% and 20% 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 by creating your own version of the Sign in/up Form. Share it with me on Twitter: so I can see it!

不要忘记，您也可以通过创建自己的版本的“ 登录/注册表格”来参加“ ”。 在Twitter上与我分享： 这样我就可以看到它！

Also, you can suggest what we should build for the next Challenge in .

另外，您可以在建议我们应对下一次挑战的基础。

You can find the live version of the project we’ve built on .

您可以找到我们在构建的项目的实时版本。

Thank you for spending your time reading this ?, I hope that you learned something new!

谢谢您花费时间阅读这篇文章，希望您能学到新知识！

Originally published at .

最初在发布。

翻译自:

登录滑块验证表单