React组件中垂直Skeleton Loader从下到上动画失效问题

Here's the corrected SCSS code to get your vertical skeleton loader animating from bottom to top:

@keyframes placeHolderLoader {
  0% {
    background-position: -468px 0;
  }
  100% {
    background-position: 468px 0;
  }
}

@keyframes verticalPlaceHolderLoader {
  0% {
    background-position: 0 100%; /* Start with gradient bottom-aligned */
  }
  100% {
    background-position: 0 0; /* End with gradient top-aligned */
  }
}

.animated-background {
  .background-masker {
    height: 14px;
    border-radius: 7px;
    width: 80%;
    margin-bottom: 2px;
    animation-duration: 1.3s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderLoader;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 100%;

    &.vertical-line {
      width: 50px;
      height: 140px;
      background: linear-gradient(to bottom, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
      background-size: 100% 200%; /* Make gradient twice as tall as the element */
      animation-name: verticalPlaceHolderLoader;
      margin-bottom: 0; /* Optional: Remove inherited bottom margin */
    }
  }
}

Key Changes Explained: #

1. Adjusted Vertical Animation Keyframes:

   • Replaced ambiguous bottom/top keywords with numerical background-position values (0 100% and 0 0). This gives precise control over where the gradient sits relative to the element.
   • 0 100% starts the gradient's top edge at the element's bottom, showing only the lower half of the gradient.
   • 0 0 moves the gradient's top edge to the element's top, creating the upward shimmer effect.

2. Modified Background Size:

   • Added background-size: 100% 200% to the vertical loader. This makes the gradient twice as tall as the element, creating enough space for the animation to slide smoothly without abrupt repeats.

3. Optional Margin Tweak:

   • Removed the inherited margin-bottom: 2px to clean up spacing below the vertical loader (adjust this based on your layout requirements).

Your React component code (Loader.js) doesn't need any changes—just update the SCSS with the above fixes, and the vertical loader will animate smoothly from bottom to top.

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