HTML中设置多个data-effect仅首个生效，如何同时启用？

Hey there! I totally get the frustration when only one of your effects works—let's break down why this is happening and fix it so both fadeInRightOpacity and fadeInLeftBig run together.

Why Only the First Effect Works #

Most custom implementations of data-effect attributes are set up to read just the first space-separated value from the attribute. They don't automatically split and process multiple entries, which is why your second effect gets ignored.

Solutions to Get Both Effects Running #

1. Update Your JavaScript Logic to Handle Multiple Effects #

If you're using custom JS to trigger these effects, modify it to split the data-effect value into an array and apply each effect individually. Here's how:

// Grab the target div
const animatedDiv = document.querySelector('div[data-effect]');
// Split the space-separated effects into an array
const effectsList = animatedDiv.dataset.effect.split(' ');

// Loop through each effect and apply it
effectsList.forEach(effect => {
  // If your effects are CSS classes, add them all
  animatedDiv.classList.add(effect);
  
  // If you're using custom animation functions, call each one
  // Example: if you have functions named after the effects
  // if (typeof window[effect] === 'function') {
  //   window[effect](animatedDiv);
  // }
});

This way, every effect listed in data-effect gets processed, not just the first.

2. Combine Effects into a Single CSS Keyframe Animation #

If both effects are CSS animations, you can merge their keyframes into one custom animation to avoid conflicts (especially useful if both modify the transform property, which can overwrite each other).

For example:

/* Define your combined animation */
@keyframes combinedFadeIn {
  0% {
    opacity: 0;
    transform: translateX(100px); /* From fadeInRightOpacity */
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1.1); /* Merge fadeInLeftBig's scale + reset translate */
  }
}

/* Create a class for the combined effect */
.combined-fade-effects {
  animation: combinedFadeIn 1.2s ease-out forwards;
}

Then update your HTML to use this single effect:

<div data-effect="combined-fade-effects"></div>

3. Use CSS Multiple Animations Syntax #

If the two effects don't conflict (e.g., one modifies opacity and the other modifies transform without overlap), you can apply both animations directly in CSS using comma separation.

First, make sure your individual effect classes are defined:

.fadeInRightOpacity {
  animation: fadeInRightOpacity 1s ease-out forwards;
}

.fadeInLeftBig {
  animation: fadeInLeftBig 1s ease-out forwards;
}

Then, either add both classes directly to the element:

<div class="fadeInRightOpacity fadeInLeftBig"></div>

Or adjust your JS to add all the classes from the data-effect attribute (like the first solution).

Key Notes to Avoid Issues #

• If both effects modify the same CSS property (like transform), the later animation will overwrite the earlier one. In this case, combining keyframes (solution 2) is the best approach.
• Adjust animation durations and delays if you want effects to run sequentially instead of simultaneously. For example:

  .combined-fade-effects {
    animation: fadeInRightOpacity 1s ease-out forwards, fadeInLeftBig 1s ease-out 1s forwards;
  }
  

  This makes fadeInLeftBig start 1 second after fadeInRightOpacity finishes.

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