客户端表单验证错误动画无法正常重置问题求助

问题分析 #

你通过TransitionGroup实现表单错误提示动画，服务端错误能正常触发动画，但客户端验证错误仅能触发一次——重复调用login()时，虽然重置了timeout和issueVisible，但动画不会重新触发，必须等待错误自动消失后才能再次生效。

核心原因是Vue的响应式更新是异步批量处理的：在login()开头将issueVisible.value设为false，紧接着在客户端验证失败的分支又将其设为true，这两次修改会被Vue合并，DOM实际上没有经历“移除→添加”的完整过程，TransitionGroup无法检测到元素的变化，因此不会触发进入动画。而服务端错误因为存在await storeAuth.login()的异步操作，两次状态修改之间有时间差，DOM已经完成了移除，所以动画能正常触发。

可行解决方案 #

方案1：使用nextTick延迟显示错误 #

利用nextTick等待DOM完成移除操作后，再将issueVisible设为true，确保TransitionGroup能捕捉到元素的添加动作：

修改login()函数的客户端验证分支：

const login = async () => {
    const result = safeParse(LoginSchema, loginData, {
        abortPipeEarly: true,
    });
    // 先清空旧状态
    if (timeout) {
        clearTimeout(timeout);
        timeout = undefined;
    }
    issues.value = {};
    issueVisible.value = false;

    if (result.success) {
        // 原有服务端逻辑保持不变
        try {
            await storeAuth.login(loginData);
            if (storeAuth.serverError) {
                issues.value.server = storeAuth.serverError;
                // 服务端错误同样可以用nextTick确保动画触发
                nextTick(() => {
                    issueVisible.value = true;
                    timeout = setTimeout(() => {
                        issueVisible.value = false;
                    }, 3000);
                });
            } else {
                setTimeout(() => {
                    router.push({ name: 'home' });
                }, 3000);
            }
        } catch (err) {
            issues.value.server = storeAuth.serverError;
            nextTick(() => {
                issueVisible.value = true;
                timeout = setTimeout(() => {
                    issueVisible.value = false;
                }, 3000);
            });
        }
    } else {
        issues.value = flatten<typeof LoginSchema>(result.issues).nested;
        // 等待DOM完成移除后再显示错误
        nextTick(() => {
            issueVisible.value = true;
            timeout = setTimeout(() => {
                issueVisible.value = false;
            }, 3000);
        });
    }
};

方案2：给错误组件添加唯一key #

通过给ItemFormError组件绑定基于错误内容的唯一key，强制Vue认为每次错误都是新的组件实例，从而触发TransitionGroup的动画：

修改模板中的ItemFormError：

<TransitionGroup name="bounce">
    <template v-if="issueVisible">
        <ItemFormError
            class="modal__error"
            :key="JSON.stringify(issues) + determineField()"
            :fieldName="determineField()"
            :issues="issues">
            <template #icon>
                <IconError class="modal__error-icon" />
            </template>
        </ItemFormError>
    </template>
</TransitionGroup>

同时优化login()的状态重置逻辑（确保每次触发错误前清空旧状态）：

const login = async () => {
    const result = safeParse(LoginSchema, loginData, {
        abortPipeEarly: true,
    });
    if (timeout) {
        clearTimeout(timeout);
        timeout = undefined;
    }
    issues.value = {};
    issueVisible.value = false;

    if (result.success) {
        // 原有服务端逻辑...
    } else {
        issues.value = flatten<typeof LoginSchema>(result.issues).nested;
        issueVisible.value = true;
        timeout = setTimeout(() => {
            issueVisible.value = false;
        }, 3000);
    }
};

方案选择 #

• 若希望保持组件实例复用，优先选择方案1，它更符合Vue的响应式更新逻辑。
• 若错误内容变化频繁，或需要确保每次错误都强制触发动画，可选择方案2，实现更直接。

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