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 /> 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