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
的检查并始终呈现<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;
`
`;
【讨论】:
谢谢你的回答,这真的让我清楚地知道我如何用正确的方法解决问题以上是关于CSS 过渡不适用于反应和样式化的组件的主要内容,如果未能解决你的问题,请参考以下文章
CSS 过渡:不透明度和可见性过渡不适用于 Firefox(适用于 Chrome / Safari)