DAY8-波浪表单

前言

这个项目来源于GitHub上的一个开源项目https://github.com/bradtraversy/50projects50days，总共有50个用来练手的前端项目，我学习然后复现效果，并记录学习笔记和心得。

效果展示

form-wave

HTML&CSS

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>form-wave</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html, body {
            height: 100%;
        }

        body {
            background: #4682b4;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .form-warp {
            width: 380px;
            height: 430px;
            background: #2a4e6c;
            padding: 40px 30px;
            box-sizing: border-box;
            border-radius: 5px;
        }

        .form-warp h1 {
            color: #fff;
            text-align: center;
        }


        .form-warp form {
            margin: 20px 0;
        }

        .form-warp .form-row {
            display: flex;
            flex-direction: column-reverse;
            margin: 30px 0;
        }

        .form-warp .form-row input {
            border: none;
            outline: none;
            background: transparent;
            border-bottom: 2px solid #add8e6;
            font-size: 18px;
            padding: 10px 0;
            color: #fff;
        }

        .form-warp .form-row button {
            background: #add8e6;
            border: none;
            padding: 15px 0;
            border-radius: 5px;
        }

        .form-warp .form-row label {
            color: #fff;
        }

        .form-warp footer {
            color: #fff;
            font-size: 14px;
        }

        .form-warp footer a {
            color: #add8e6;
            text-decoration: none;
        }

        .form-warp .form-row input + label span {
            display: inline-block;
            transform: translateY(25px);
            transition: transform 150ms ease-in-out;
        }

        .form-warp .form-row input:focus + label span,
        .form-warp .form-row input:valid + label span{
            transform: translateY(0px);
        }
    </style>
</head>
<body>
<main>
    <section class="form-warp">
        <h1>Please Login</h1>
        <form action="">
            <!-- 禁止浏览器自动填充 -->
            <input type="password" hidden autocomplete="new-password">
            <div class="form-row">
                <input type="text" required>
                <label>Email</label>
            </div>
            <div class="form-row">
                <input type="password" required>
                <label>Password</label>
            </div>
            <div class="form-row">
                <button>Login</button>
            </div>
        </form>
        <footer>
            <span>Don't have an account?</span> <a href="#">Register</a>
        </footer>
    </section>
</main>
</body>
</html>

JS

let labelList = document.querySelectorAll('.form-warp label');
labelList.forEach(e => {
    let arr = e.textContent.split("");
    arr = arr.map((a,index) => {
        return `<span style="transition-delay: ${index * 50}ms">${a}</span>`
    })
    e.innerHTML = arr.join('')
})

总结

  1. 做的时候当时脑筋没有转过弯来，想着文字长度是不固定的，怎么给不同的元素加不同的延时，其实就是在生成元素的时候指定不同的过渡延时。
  2. 方便使用css选择器进行选择，这里把label写在了input的后面，然后通过弹性布局的反向排布放到前面来，这也算一个小技巧吧。
  3. span是行内标签，必须要给他转成block或者inline-block才能使用transform。
  4. 还有一个比较重要的点，在css中我们可以看到:valid，为什么要加这个呢？因为我们想要input标签在有内容的时候，即使失去焦点，上面的标题也不要下来了，这个伪类可以选取拥有有效值的表单元素，我们通过input标签上的required属性，让该值拥有必填的属性，只要有值，那么上面的标题就不会再移动了。
DAY8-波浪表单
https://www.zhaojun.inkhttps://www.zhaojun.ink/archives/day8-form-wave
作者
卑微幻想家
发布于
2022-12-19
许可协议