IntersectionObserver - 变换属性针对整个 SVG 动画而不是类

Question

我试图让 svg 动画在视口中启动。它有效，但是当添加

transform properties

时，整个 svg 而不仅仅是目标类受到影响。

import React, { useEffect, useRef, useState } from 'react';
import { ReactComponent as Animation2Svg } from '../assets/animation3.svg';
import './animation2.css';

export const Animation2 = () => {
  const animationRef = useRef();
  const [visibleAnimation, setVisibleAnimation] = useState();
  console.log('visibleAnimation', visibleAnimation);
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      const entry = entries[0];
      setVisibleAnimation(entry.isIntersecting);
      console.log('entry', entry);
    });
    observer.observe(animationRef.current);
    // console.log('animationRef', animationRef.current);
  }, []);

  return (
    <div
      ref={animationRef}
      className={`'animation_container' ${visibleAnimation ? 'lamp_fill' : ''}`}
    >
      <svg
        viewBox="0 0 960 960"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <g id="lamp">
          <g id="_12">
            <g id="Group">
              <path
                className="lamp_fill"
                d="M 673.8,268.9 C 670.49,212.31 666.03,147.85 624.05,105.09 605.03,88.927 595.75,88.708 576.1,80.6 534.08,69.765 491.07,82.083 449.66,89.913 382.62,105.67 316.07,123.33 250.11,143.21 201.04,156.23 143.22,156.92 106.41,196.62 76.875,241.04 84.709,297.04 84.201,347.5 86.612,407.39 83.901,468 85.176,528.14 91.427,563.78 86.363,600.74 93.601,636.8 98.899,686.58 100.94,736.75 110.7,786 111.72,829.71 125.29,878.56 165.7,901.7 198.5,924.75 239.5,926.4 278.1,929.56 334.3,923.31 391.34,926.4 447.84,924.66 496.01,923.32 545.09,928.05 592.56,918.66 626.73,907.16 644.69,870.96 647.87,836.92 653.71,790.73 638.83,744.73 638.8,698.8 639.22,658.74 633.25,618.65 640.1,578.7 645.02,533.8 655.02,489.37 657.67,444.12 668.11,386.49 675.47,327.74 673.8,268.9 Z"
              fill="black"
              />
              <!--multiple path elements-->
            </g>
          </g>
        </g>
      </svg>
    </div>
  );
};

这就是我可以使用的 CSS（并且没有转换属性）

.lamp_fill {
  transform-box: fill-box;
  fill: transparent;
  animation: turnOn 6s linear infinite;
}


@keyframes turnOn {

  0%,
  30% {
    fill: transparent;
  }

  40%,
  100% {
    opacity: 1;
    fill: #ffb200;
  }
}

我尝试移动

ref

，以便 ut 直接瞄准 svg，但说实话，我不知道如何解决这个问题。

这里有一个CodeSandbox来说明问题 https://codesandbox.io/s/hopeful-tree-xmd32p?file=/src/App.js

Answer 1

目前，有两个属于

lamp-fill

类的对象，并且都具有动画效果。

<div className={`animation_container ${visibleAnimation ? 'lamp_fill' : ''}`} >

和

<path className="lamp_fill" d="..." />

如果您只想为第二个动画设置动画，请仅在那里设置类。像这样：

<div
  ref={animationRef}
  className='animation_container'
>
  <svg
    viewBox="0 0 960 960"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g id="lamp">
      <g id="_12">
        <g id="Group">
          <path
            className={visibleAnimation ? "lamp_fill" : ""}
            d="..."
          fill="black"
          />
          <!--multiple path elements-->
        </g>
      </g>
    </g>
  </svg>