如何在 react 条件渲染时加上动画

[headsteins]

最近遇到一个问题，想在 react 条件渲染的时候加上一些动画，比如淡入淡出这种效果，但是奈何本人技术水平有限，想不到什么好点子能实现的，希望大佬们能给我一些思路

    {
        showTip &&
        <div className={"toolTip"} style={{ position: "absolute"}}>
             <AvatarTip></AvatarTip>
        </div>
    }

类似这种形式的，怎么能添加动画效果呢

[IvanLi127]

我记得是有现成库可用，不过抛开 react ，你平常咋用 html+css+js 做动画的，就咋做呀。。。。大同小异

[wf18321589792]

用 visible 控制显隐，显示的 class 加动画即可

[kid740246048]

简单效果的话，可以看下这个问答： https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property
不介意使用第三方库的话，可以用 react-spring 做出更多酷炫的效果

[gogogo2000]

https://reactcommunity.org/react-transition-group/

[MMMMMMMMMMMMMMMM]

一般主流框架都是内置一些常见动画，如果不满足你的需求的话，还有 4 种方案

1.web animation api https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
2.css keyframe https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
3.canvas 2d https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
4.glsl shader gpu 动画 https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

难度曲线 1~4 阶梯提升，但效率也越高
市面上的开源动画库也都是基于这些实现的
4 可能需要找一些小型 glsl 编译流程和常用函数封装库，不然很 math 很 hardcore

[fengfuliu]

条件判断切换 className 在 classsName 里面写 css 过度

[SanjinGG]

直接在 class 里写就行

[xqk111]

通过 className 控制

[ragnaroks]

<div className={`tool-tip ${toolTip&&"visable"}`} style={{ position: "absolute"}}><AvatarTip></AvatarTip></div>

.tooltip{display:none,transition:display......}
.tooltip.visable{display:block}