javascript - CSS - 通过.map函数显示项目时旋转动画失去过渡属性

Question

当我有一个像这样的 Image 组件时，一切都按预期工作。它呈现一个箭头，单击该箭头时，它会以平滑的动画旋转 90 度。

<ImageTestWrapper onClick={() => rotateArrow()}>
  <MyImage
   src="/right-arrow.png"
   alt="test"
   width={50}
   height={50}
   isArrowRotated={isArrowRotated}
  />
</ImageTestWrapper>



const ImageTestWrapper = styled.div`
  margin: 50px auto;
  width: 100px;
`;

const MyImage = styled.img<{ isArrowRotated: boolean }>`
  display: block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;

  -webkit-transform: ${(props) =>
    props.isArrowRotated ? "rotate(90deg)" : "rotate(0deg)"};
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
`;

当我尝试在 .map 函数中做同样的事情时，问题就出现了。

const ItemArrayComponent: Function = (): JSX.Element[] => {
    return Object.keys(itemArray).map((item: any, index: number) => (
      <ImageTestWrapperMap
        onClick={() => rotateImage(item, itemArray[item])}
        key={index}
      >
        <MyImageMap
          src="/right-arrow.png"
          alt="test"
          width={50}
          height={50}
          isImageRotated={itemArray[item]}
        />
      </ImageTestWrapperMap>
    ));
  };



const ImageTestWrapperMap = styled.div`
  margin: 50px auto;
  width: 100px;
`;

const MyImageMap = styled.img<{ isImageRotated: boolean }>`
  display: inline-block;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;

  -webkit-transform: ${(props) =>
    props.isImageRotated ? "rotate(90deg)" : "rotate(0deg)"};
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
`;

逻辑工作正常，正确渲染 3 个箭头并将选定的箭头旋转 90 度。问题是没有任何过渡属性被应用到任何箭头上，所以当点击时箭头会立即旋转。

标签： javascriptcssreactjs