使用DOM替代jQuery实现JavaScript动画：能否复现指定动画？如何实现？

Absolutely! You can definitely replicate this animation without jQuery using vanilla JavaScript—there are a couple of solid approaches to choose from, depending on whether you prefer direct JS control or leveraging CSS for better performance. Let’s break down both methods, starting with the one that most closely mirrors jQuery’s .animate() logic.

Approach 1: Web Animations API (Closest to jQuery’s Behavior) #

The Web Animations API lets you define and control animations directly in JavaScript, just like jQuery’s .animate() but without the library overhead. Here’s how to replicate your exact animation:

// Grab all elements with the 'bubbles-animation' class
const bubbles = document.querySelectorAll('.bubbles-animation');

bubbles.forEach(bubble => {
  // Get the element's current state to start the animation from its existing values
  const currentStyle = getComputedStyle(bubble);
  const currentOpacity = parseFloat(currentStyle.opacity);
  // Ensure opacity doesn't drop below 0 (invalid value)
  const targetOpacity = Math.max(0, currentOpacity - 0.7);

  // Define and start the animation
  const animation = bubble.animate(
    [
      // Start state: current bottom and opacity
      { bottom: currentStyle.bottom, opacity: currentOpacity },
      // End state: bottom at 100% and reduced opacity
      { bottom: '100%', opacity: targetOpacity }
    ],
    {
      duration: 2000, // Match jQuery's 2000ms duration
      easing: 'ease-in-out' // Close to jQuery's default 'swing' easing; adjust if needed
    }
  );

  // Remove the element once the animation finishes
  animation.onfinish = () => bubble.remove();
});

Key Details: #

• getComputedStyle() fetches the element’s current rendered styles, just like jQuery does under the hood, so the animation starts from its existing position and opacity.
• The Math.max(0, ...) check prevents us from setting an invalid negative opacity value.
• You can tweak the easing property (e.g., use 'linear' for a steady speed) to match your desired animation feel.

Approach 2: CSS Transitions (More Performant) #

If you want to offload animation logic to the browser’s optimized CSS engine (great for performance, especially with multiple elements), you can define transitions in CSS and trigger them with JavaScript:

Step 1: Add CSS Transitions #

.bubbles-animation {
  /* Define the transition properties and duration */
  transition: bottom 2000ms ease-in-out, opacity 2000ms ease-in-out;
  /* Ensure the element is positioned so the 'bottom' property works */
  position: absolute; /* or relative/fixed, depending on your layout */
}

Step 2: Trigger the Animation with JS #

const bubbles = document.querySelectorAll('.bubbles-animation');

bubbles.forEach(bubble => {
  const currentOpacity = parseFloat(getComputedStyle(bubble).opacity);
  const targetOpacity = Math.max(0, currentOpacity - 0.7);

  // Update the element's styles to trigger the CSS transition
  bubble.style.bottom = '100%';
  bubble.style.opacity = targetOpacity;

  // Remove the element once the transition completes
  bubble.addEventListener('transitionend', () => {
    bubble.remove();
  }, { once: true }); /* { once: true } ensures the listener only runs once, 
                         even though two properties are transitioning */
});

Key Details: #

• The { once: true } option prevents the transitionend event from firing twice (once for each animated property), which would try to remove the element twice.
• This approach is generally more performant because CSS animations are handled by the browser’s compositor thread, separate from the main JS thread.

Why This Works #

jQuery’s .animate() method essentially calculates intermediate style values over time and updates the element’s styles, or uses CSS transitions if available. Both vanilla approaches above replicate that exact behavior—moving the element to bottom: 100%, reducing opacity by 0.7 over 2 seconds, then removing the element—without relying on jQuery.

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