Question

我想使用Material-UI和样式组件在Grid组件上设置淡入淡出动画。但这是行不通的，关于条件道具有一个错误。你能告诉我怎么做吗？

import React from "react";
import styled, { keyframes } from "styled-components";
import { Grid } from "@material-ui/core";

const fadeIn = keyframes`
  0% {
    height: 0
  }
  50% {
    height: 50%;
  }
  100% {
    height: 100%;
  }
`;

const fadeOut = keyframes`
  0% {
    height: 100%
  }
  50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
`;


const AnimationGrid = styled(Grid)<{ isOpen: boolean }>`
  && {
    visibility: ${props => (props.isOpen ? "visible" : "hidden")};
    animation: ${props => (props.isOpen ? fadeIn : fadeOut)}
      0.3s linear 0s 1 forwards;
  }
`;


type AnimationProps = {
  isOpen: boolean;
};


const AnimationComp = ({isOpen}: AnimationProps) => {
  return (
        <AnimationGrid container isOpen={isOpen}>
          <Grid item xs={6}>
              Here is left section 
          </Grid>
          <Grid item xs={6}>
              Here is right section
          </Grid>
        </AnimationGrid>
  )
}

控制台上也有错误。淡入淡出的动画效果很好，但淡入淡出效果却不起作用。

Warning: React does not recognize the `isOpen` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component, 
remove it from the DOM element.

我会说isOpen道具不能很好地工作。谢谢。

Answer 1

您的问题由两部分组成，所以我将以这种方式回答。

对于控制台错误：此行为困扰着许多人。您看到此错误的原因是因为属性isOpen传递给了基础DOM元素。但是，DOM元素不支持布尔属性isOpen。要解决此问题，您可以使用

styled(({ isOpen, ...props }) => <Grid {...props} />)<{ isOpen: boolean }>`...`

对于动画部分：您看不到淡入淡出的动画，因为在其开始处设置了visibility: hidden。这样，元素立即消失。要获得与visibility: hidden类似的行为，您可以将“ opacity: 0”添加到动画中的比例为“ 100％” 并设置pointer-events: ${props => props.isOpen ? 'initial' : 'none'}。

希望这会有所帮助！

样式组件条件道具在Material-ui组件中不起作用

1 个答案: