为什么转换不适用于由反应创建的元素答案

【问题标题】：Why are transitions not working for elements created in by react为什么转换不适用于由反应创建的元素
【发布时间】：2021-01-09 01:56:23
【问题描述】：

我已将此 css 应用于 react 中的元素

.my-float{

    display: flex;
    justify-content: center;
    align-content: center;
    font-size: 1em;
    transition: 2s;
    transition-timing-function: ease-in;
}

在我的组件中我有

 {(!visibility)&&<i className="fa fa-angle-up my-float" ></i>}
 {visibility&&<i className="fa fa-times my-float" ></i>}

正如您所见，我可以切换这两个元素，但挑战在于不应用过渡。如何确保过渡有效？我希望元素在出现和消失时分别淡入和淡出。

【问题讨论】：

transition: 2s; -> 在此处指定all 或应转换的 CSS 属性
@iamafasha：您好！！！我已经提到了一些可能导致您的代码无法正常工作的问题 :) 如果这很好地解决了您的问题。如果不是这样，我建议与我分享一个代码沙盒项目链接.. 我会尽力帮助你:)
我尝试按照您所说的进行更改，但最终得到了这个。 codesandbox.io/s/late-leaf-ewy9i

标签： javascript reactjs user-interface css-transitions

【解决方案1】：

使用您的代码，您将根据 visibility 从 DOM 中添加/删除您的 <i>

因此，如果您的图标从 DOM 中移除，或者您的图标刚刚添加到 DOM，您将不会有任何 CSS 转换。

您的图标需要每次都在 DOM 上，以便可以应用 CSS 过渡

<>
  <i className={`fa fa-angle-up my-float ${visibility && 'hidden'} />
  <i className={`fa fa-times my-float ${!visibility && 'hidden'} />
</>

或使用 https://www.npmjs.com/package/clsx

import cn from 'clsx';

<>
  <i className={cn('fa fa-angle-up my-float', visibility && 'hidden')} />
  <i className={cn('fa fa-times my-float', !visibility && 'hidden'} />
</>

【讨论】：

【解决方案2】：

您的 CSS 中缺少 transition-property 名称。

你用过。

transition: 2s;
transition-timing-function: ease-in;

但是缺少 CSS 属性将发生的转换。尝试类似：

/* Apply to all changed properties */
transition: all 0.5s ease-out;

第二件事是在元素上设置过渡，然后根据任何事件（例如悬停或单击或加载）生效。

第三个my-float 类已用于您所在州的两种情况。

 {(!visibility)&&<i className="fa fa-angle-up my-float" ></i>}
 {visibility&&<i className="fa fa-times my-float" ></i>}

这段代码可以清理，DRY principle可以在className.内跟上

<i className={`${visibility}?"fa fa-times my-float" : fa fa-angle-up my-float" `}></i>

【讨论】：