javascript - React-spring:包含动画图像的动画 div

Question

我正在尝试使用react-spring动画 div和里面的图像 div ，代码如下。到目前为止，dangleProps工作正常:图像是动画的，但是 div 不是:hoveredProps由于某种原因无法正常工作，试图找出答案:

图标.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 />

Answer 1

你的例子很难重现。最后我成功了。

问题是，您没有指定 roteteZ 的单位。如果将 deg 添加到所有出现的情况中，它将起作用。

  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