React-spring: animate div 包含动画图像

Question

我正在尝试使用 react-spring 为 div 和此 div 中的图像制作动画，代码如下。到目前为止，dangleProps 工作正常：图像是动画的，但是，div 不是：hoveredProps 由于某种原因不工作，试图弄清楚：

Icon.js

import React, { useState } from "react";
import { useSpring, animated } from "react-spring";

export const Icon = ({ showPage, imageSource, altText, index }) => {
  const [isHovered, setIsHovered] = useState(false);

  const dangleProps = useSpring({
    transform: showPage ? "rotateZ(0deg)" : "rotateZ(180deg)",
    transformOrigin: "top",
    from: { transform: "rotateZ(180deg)" },
    config: { mass: 1, tension: 210 - index * 50, friction: 5 },
  });

  const hoveredProps = useSpring({
    transform: isHovered ? "rotateZ(320deg)" : "rotateZ(0)",
    from: { transform: "rotateZ(0)" },
    config: { mass: 1, tension: 210, friction: 5 },
  });

  return (
    <animated.div
      className="contact-icon"
      onMouseEnter={() => setIsHovered(true)}
      onMouseLeave={() => setIsHovered(false)}
      style={hoveredProps}
    >
      <animated.img src={imageSource} alt={altText} style={dangleProps} />
    </animated.div>
  );
};

section.contact {
  background-color: rgba(160, 210, 140, 0.3);
  margin: 0;
  height: 100px;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact-icon {
  margin: 0 calc(1vw + 10px);
  cursor: pointer;
}
.contact-icon img {
  height: 50px;
}

注意：section.contact 包裹了几个 <Icon />s

Answer 1

您的示例很难重现。我终于成功了。

问题是，您没有为 roteteZ 指定单位。如果您将度数添加到所有出现的位置，它将起作用。

  const hoveredProps = useSpring({
    transform: isHovered ? "rotateZ(320deg)" : "rotateZ(0deg)",
    from: { transform: "rotateZ(0deg)" },
    config: { mass: 1, tension: 210, friction: 5 },
  });

https://codesandbox.io/s/eager-monad-tb41s

React-spring: animate div 包含动画图像

React-spring: animate div containing an animated image

javascript

frontend

reactjs

react-spring

Icon.js