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

Posted

技术标签:

【中文标题】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 的检查并始终呈现&lt;Description&gt;。 所以不要这样:

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;
  `
`;

【讨论】:

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

以上是关于CSS 过渡不适用于反应和样式化的组件的主要内容,如果未能解决你的问题,请参考以下文章

CSS 过渡:不透明度和可见性过渡不适用于 Firefox(适用于 Chrome / Safari)

在反应中将 ref 传递给样式化的组件

TailwindCSS 不适用于 HTML 输入和按钮标记

反应内联样式不适用于某些属性

如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色

*ngContainerOutlet 样式不适用于 ng-component 封装