reactjs 难道css动画不能在ios chrome上运行吗?

8hhllhi2  于 2023-02-12  发布在  React
关注(0)|答案(1)|浏览(116)

我正在做一个动画,显示菜单的连续给予延迟。下面是我的代码(孪生。宏+情感)。

const Menu = ({ onClose }: Props) => {
  return (
    <>
      <div className="absolute top-0 left-0 w-full h-screen z-menu">
        <StaticImage className="w-full h-screen" src="../../static/images/bg-main.png" alt="배경" />
      </div>
      <div className="absolute top-0 left-0  w-full h-screen bg-menu z-menu">
        <button className="absolute top-4 right-4 text-white hover:text-gray-200" onClick={onClose}>
          <CloseIcon />
        </button>
        <Responsive className="py-20">
          /* menu */
          <ul className="flex flex-col items-start gap-9 overflow-hidden">
            <Item>
              <Link to="/about">About</Link>
            </Item>
            <Item>
              <Link to="/project">Project</Link>
            </Item>
            <Item>
              <Link to="/story">Story</Link>
            </Item>
            <Item>
              <Link to="/group">Group</Link>
            </Item>
          </ul>
        </Responsive>
      </div>
    </>
  );
};

export default Menu;

const showMenu = keyframes`
  from {
    transform: translateX(-100%);
  } 
  to {
    transform: translateX(0);
  }
`;

const Item = styled.li`
  ${tw`-translate-x-full text-4xl font-bold text-white transition will-change-transform hover:text-gray-200`};
  &:nth-of-type(1) {
    animation: ${showMenu} 0.3s ease-in-out forwards;
    -webkit-animation: ${showMenu} 0.3s ease-in-out forwards;
  }
  &:nth-of-type(2) {
    animation: ${showMenu} 0.3s ease-in-out 0.1s forwards;
    -webkit-animation: ${showMenu} 0.3s ease-in-out 0.1s forwards;
  }
  &:nth-of-type(3) {
    animation: ${showMenu} 0.3s ease-in-out 0.2s forwards;
    -webkit-animation: ${showMenu} 0.3s ease-in-out 0.2s forwards;
  }
  &:nth-of-type(4) {
    animation: ${showMenu} 0.3s ease-in-out 0.3s forwards;
    -webkit-animation: ${showMenu} 0.3s ease-in-out 0.3s forwards;
  }
`;

它在桌面浏览器和ios safari中运行良好,但是动画在ios chrome中中断了。这是一个bug吗?有什么解决方案吗?
我希望它能在ios chrome上正常工作。

taor4pac

taor4pac1#

我认为问题出在will-change上。
根据MDN文档,它是作为最后的手段使用的。所以也许谷歌把它取下来是为了避免性能问题。
请考虑改用transform属性。
希望能有所帮助

相关问题