CSS 过渡不适用于反应和样式化的组件

Posted 2023-02-23

【中文标题】CSS 过渡不适用于反应和样式化的组件

【英文标题】：CSS Transition not working with react and styled components

【发布时间】：2021-08-22 18:34:52

【问题描述】：

我的 css 转换有问题，我使用样式化组件，元素根据 onClick 来回触发的 react useState 的变化添加其 className，

这是代码中没有按预期工作的部分：

export const SearchProduct = ( product ) => 
  const [descStatus, setdescStatus] = useState(false);

  const handleDesc = () => 
    setdescStatus(!descStatus);
  ;

  return (
    <li>
      <Item>
        <Photo>
          <img src=`$product.productImg` alt=product.productTitle></img>
        </Photo>
        <Information>
          <h3> product.productTitle </h3>
          <Desclook>
            <div className=descStatus ? 'active' : null onClick=handleDesc>
              descStatus ? 'Close' : 'See Desc ...'
            </div>
          </Desclook>
          descStatus && (
            <Description --> this is part that dont work 
              className=descStatus ? 'showContent content' : 'content'
            >
              product.productDesc
            </Description>
          )

这是样式化组件部分：

const Description = styled.p`
  margin: 10px;
  padding: 0;
  transition: all 0.3s ease-in-out;

  &.content 
    height: 0;
    overflow: hidden;
  

  &.showContent 
    height: 70px;
    overflow-y: scroll;
  
`;

有没有人知道我的代码在这里发生了什么，因为我对反应和样式组件有点陌生

【参考方案1】：

删除对descStatus 的检查并始终呈现<Description>。 所以不要这样：

descStatus && (
  <Description
    className=descStatus ? 'showContent content' : 'content'
  >
    product.productDesc
  </Description>
)

这样做：

<Description
  className=descStatus ? 'showContent content' : 'content'
>
  product.productDesc
</Description>

这背后的原因是 CSS 过渡需要从与当前值不同的值过渡。在您的代码中，当您在渲染前检查descStatus 是否为true 时，您的Description 组件将永远不会有className="content"，并且最初总是以70px 的高度渲染，因此不会发生过渡。

【讨论】：

谢谢你的回答，现在我很清楚了

【参考方案2】：

嘿，如果您将状态作为道具发送而不是设置 className，您可以轻松解决它 而且您应该根据先前的状态更新状态，并且由于 useState 设置器异步设置状态，您可能需要 setState 的异步版本，这与此问题无关，但在某些情况下可能会导致问题

const handleDesc = () => 
    setdescStatus(p => !p);
  ;

对于样式化的组件部分

<Description --> this is part that dont work 
  show=descStatus
  >
  product.productDesc
</Description>

在样式化组件中，您可以像处理它一样

import styled,css from 'styled-components';

const Description = styled.p`
  margin: 10px;
  padding: 0;
  transition: all 0.3s ease-in-out;

  //content class styles applied by default
  height: 0;
  overflow: hidden;

  //these styles will be applied only if show is true (css you can import from 
  //styled component as a named import)

  $(show) => show && css`
   height: 70px;
   overflow-y: scroll;
  `
`;

【讨论】：

谢谢你的回答，这真的让我清楚地知道我如何用正确的方法解决问题