分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了CSS Transition 不适用于 react 和 styled 组件，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决CSS Transition 不适用于 react 和 styled 组件？

开发过程中遇到CSS Transition 不适用于 react 和 styled 组件的问题如何解决？下面主要结合日常开发的经验，给出你关于CSS Transition 不适用于 react 和 styled 组件的解决方法建议，希望对你解决CSS Transition 不适用于 react 和 styled 组件有所启发或帮助；

我的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>
          )}

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

解决方法

取消对 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"，并且最初总是以 70 像素的高度呈现，因此不会发生过渡。

嘿，如果您将状态作为道具发送而不是设置 className，您可以轻松解决它并且您应该根据先前的状态更新状态，并且由于 useState setter 异步设置状态，您可能需要 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;
  `}
`;