Angular动画执行失败：不支持部分关键帧问题求助

Hey there! Let's break down this error and get your Angular animations working smoothly. That DOMException pops up because the browser's native animate() API (which Angular uses under the hood) can't handle incomplete keyframes—meaning your animation is missing critical style definitions between states.

Common Causes & Fixes #

Here are the most likely issues in your code, plus straightforward fixes:

1. Missing State Style Definitions

If you're using states like void (for elements entering/leaving the DOM) or custom states, you need to define full styles for every state involved in transitions.

❌ Wrong (missing void state style):

animations: [
  trigger('slideIn', [
    state('visible', style({ transform: 'translateX(0)' })),
    transition('void => visible', [
      animate('300ms ease-out')
    ])
  ])
]

✅ Fixed (add missing state style):

animations: [
  trigger('slideIn', [
    state('visible', style({ transform: 'translateX(0)', opacity: 1 })),
    // Define the starting state for elements entering the DOM
    state('void', style({ transform: 'translateX(-100%)', opacity: 0 })),
    transition('void => visible', [
      animate('300ms ease-out')
    ])
  ])
]

2. Incomplete Styles in animate() Calls

If you're using inline styles in animate() without linking to defined states, make sure you provide clear starting/ending styles (or link to states that have full styles).

❌ Wrong (only specifying duration, no target style):

transition('* => hidden', [
  animate('200ms') // No end-state style defined
])

✅ Fixed (add explicit end style):

transition('* => hidden', [
  animate('200ms', style({ opacity: 0, height: '0px' }))
])

3. Partial Keyframes in keyframes()

When using keyframes(), every keyframe needs to include all properties you're animating—don't leave out properties that change between frames.

❌ Wrong (missing opacity in one keyframe):

transition('void => *', [
  animate('500ms', keyframes([
    style({ transform: 'translateY(-20px)', opacity: 0 }),
    style({ transform: 'translateY(0)' }) // Missing opacity breaks the animation
  ]))
])

✅ Fixed (ensure all keyframes have consistent properties):

transition('void => *', [
  animate('500ms', keyframes([
    style({ transform: 'translateY(-20px)', opacity: 0 }),
    style({ transform: 'translateY(0)', opacity: 1 })
  ]))
])

Quick Checklist for Your Code #

• Double-check that every state used in transitions has a corresponding state() definition with full styles.
• If you're using animate() without a linked state, always include the target style.
• For keyframes(), make sure each frame includes all properties you're animating (no partial definitions).

Once you fill in those missing style details, the "partial keyframes" error should vanish.

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