点击Next按钮时.container__login过渡效果失效，如何实现平滑显示？

首先，display属性无法参与CSS过渡动画，这是你当前过渡失效的核心原因。如果要实现平滑显示，得换一种方式控制元素的显示/隐藏，比如通过控制opacity、visibility或者transform这些可过渡的属性，配合切换类来实现。

以下是具体实现方案：

1. 基础CSS调整 #

修改.container__login的初始样式，让它默认处于隐藏但可过渡的状态：

.container__login {
    width: 100%;
    height: 100vh;
    background-color: var(--blanco);
    display: flex;
    justify-content: center;
    align-items: center;
    /* 默认隐藏状态 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* 可选：添加位移动画增强效果 */
    transition: all 200ms ease-out;
    /* 确保元素隐藏时不占布局（可选） */
    position: fixed;
    top: 0;
    left: 0;
}

2. 添加激活类 #

创建一个类来控制元素的显示状态：

.container__login.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

3. JS控制类切换 #

给Next按钮绑定点击事件，切换激活类：

const nextBtn = document.querySelector('.next-btn');
const loginContainer = document.querySelector('.container__login');

nextBtn.addEventListener('click', () => {
    loginContainer.classList.toggle('active');
});

原方案失效的原因 #

• display: none会直接移除元素的渲染状态，浏览器不会为它计算过渡动画，所以transition完全失效。
• 元素处于display: none状态时，伪类（比如:hover、:active）也无法触发，因为元素在DOM中不可交互。

额外提示 #

• 如果不需要位移动画，可以只保留opacity和visibility的过渡，visibility用来控制元素的可交互性（hidden状态下元素无法被点击）。
• 若坚持要用display，可以通过JS在切换display后延迟触发过渡，但这种方式不如上述方法稳定。

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