HTML/CSS/JS：按钮触发动画、表单切换及数据存储求助

1. 点击触发进度条动画（页面刷新不自动执行） #

你当前的代码会在页面加载时自动触发动画，原因是.line元素默认绑定了动画规则。调整思路：把动画逻辑拆成独立类，仅在点击按钮时为进度条添加该类，同时处理重复点击的重置逻辑。

修改后CSS：

.next {
    width: 150px;
    height: 35px;
    background-color: var(--main-solid);
    border: none;
    border-radius: 80px;
    left: 45vw;
    position: absolute;
    top: 80%;
    outline: 3px white solid;
    cursor: pointer;
    transition: .5s;
}

.loading .line {
    height: 4px;
    border-radius: 20px;
    background: var(--main-solid);
    position: absolute;
    left: 0%;
    top: 48%;
    width: 0%; /* 初始宽度设为0，刷新时无显示 */
}

/* 单独抽离动画类，点击时才添加 */
.loading .line.animate {
    animation: loading 1s forwards cubic-bezier(0,0,0,0);
}

@keyframes loading {
    0%{
        width: 0%;
    }
    100%{
        width: 17.6%;
    }
}

配套JavaScript：

const nextBtn = document.querySelector('.next');
const progressLine = document.querySelector('.loading .line');

nextBtn.addEventListener('click', () => {
    // 先移除动画类再重新添加，确保重复点击也能触发动画
    progressLine.classList.remove('animate');
    // 强制浏览器重绘，避免移除/添加类的操作被合并
    void progressLine.offsetWidth;
    progressLine.classList.add('animate');
});

2. 表单切换的平滑过渡 #

用CSS的opacity和visibility配合过渡属性，实现淡入淡出的平滑切换，同时避免元素隐藏后占用空间的问题。

更新HTML结构（添加表单容器及两个表单）：

<div class="navbar">
    <div class="loading">
        <div class="line"></div>
    </div>
</div>

<div class="form-container">
    <div class="form active" id="form1">
        <!-- Form1内容示例 -->
        <input type="text" name="username" placeholder="输入用户名">
    </div>
    <div class="form" id="form2">
        <!-- Form2内容示例 -->
        <input type="number" name="height" placeholder="输入身高(cm)">
    </div>
</div>

<button class="next">Next</button>

添加过渡样式CSS：

.form-container {
    position: relative;
    width: 100%;
    height: 50vh; /* 按需调整高度 */
}

.form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.form.active {
    opacity: 1;
    visibility: visible;
}

更新JavaScript的点击事件，加入表单切换逻辑：

const form1 = document.getElementById('form1');
const form2 = document.getElementById('form2');

nextBtn.addEventListener('click', () => {
    // 保留进度条动画逻辑
    progressLine.classList.remove('animate');
    void progressLine.offsetWidth;
    progressLine.classList.add('animate');

    // 切换表单显示状态
    form1.classList.remove('active');
    form2.classList.add('active');
});

3. 存储用户输入数据 #

用一个全局对象存储用户输入，可选择实时监听输入变化，或在切换表单时一次性收集数据，方便后续计算使用。

示例代码（实时收集）：

// 初始化存储对象
const userData = {};

// 监听Form1的输入变化，实时更新数据
document.querySelectorAll('#form1 input').forEach(input => {
    input.addEventListener('input', () => {
        userData[input.name] = input.value;
    });
});

// 点击Next时也可一次性收集（可选）
nextBtn.addEventListener('click', () => {
    // 批量收集Form1数据
    const form1Inputs = document.querySelectorAll('#form1 input');
    form1Inputs.forEach(input => {
        userData[input.name] = input.value;
    });

    // 后续计算示例
    if(userData.username) {
        console.log('当前用户：', userData.username);
    }
});

后续新增表单步骤时，可延续此逻辑往userData中添加字段，最终统一处理计算。

内容的提问来源于stack exchange，提问作者Production Nerd