Angular 5中CSS过渡效果失效问题求助

Hey there! Let's break down why your transitions are acting up—this is a super common snag, but we can fix it easily.

The Core Issue #

When navigating between pages (whether traditional multi-page or a single-page app), browsers often render your .login-form in its final state right away. Transitions only trigger when there’s a clear state change (from an initial value to a target value). If the element starts in its end state, there’s no "shift" for the browser to animate. On a full reload, the browser loads resources incrementally, so it catches that initial → final state shift, which is why the transition works then.

Fixes to Implement #

1. Trigger the Transition with a Delayed State Shift (JavaScript)

We’ll let the browser first render the element in its initial state, then use JS to switch it to the target state—this creates the necessary change for the transition to fire.

First, update your CSS to define explicit initial and target states:

.login-page .login-form {
  position: relative;
  padding-top: 0; /* Initial state */
  opacity: 0; /* Optional: add fade-in for smoother animation */
  -moz-transition: all 550ms ease-in-out;
  -webkit-transition: all 550ms ease-in-out;
  -o-transition: all 550ms ease-in-out;
  transition: all 550ms ease-in-out;
}

.login-page .login-form.active {
  padding-top: 60px; /* Target state */
  opacity: 1;
}

Then add this JavaScript to trigger the state change after the page renders:

document.addEventListener('DOMContentLoaded', () => {
  const loginForm = document.querySelector('.login-page .login-form');
  
  // Use requestAnimationFrame to ensure the browser renders the initial state first
  requestAnimationFrame(() => {
    loginForm.classList.add('active');
  });
});

2. SPA-Specific Adjustments (If Applicable)

If you’re using a framework like React, Vue, or Angular:

• Use the framework’s built-in transition tools (e.g., Vue’s <Transition>, React’s react-transition-group). These are purpose-built to handle animations during route or component transitions.
• Hook into lifecycle events (like onMounted in Vue or componentDidMount in React) to add the active class after the component finishes mounting.

3. Check for CSS Overrides

Use your browser’s dev tools to inspect the .login-form element. Make sure no higher-specificity CSS rules are overriding your transition styles—if another rule sets padding-top directly without respecting the transition, it can break the animation.

Why This Works #

By letting the browser render the initial state first, then triggering the target state via JS, we force the browser to detect a style change. This mimics the incremental load behavior of a full page refresh, which is why the transition fires correctly.

内容的提问来源于stack exchange，提问作者Carlos Andres Clavijo Celestin