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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 740 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

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

9 条回复 • 2022-11-14 12:48:46 +08:00

IvanLi127

2022-11-13 01:06:01 +08:00 via Android

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

wf18321589792

2022-11-13 01:27:25 +08:00 via iPhone

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

kid740246048

2022-11-13 03:40:15 +08:00

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

gogogo2000

2022-11-13 15:32:13 +08:00

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

MMMMMMMMMMMMMMMM

2022-11-13 17:50:56 +08:00

一般主流框架都是内置一些常见动画，如果不满足你的需求的话，还有 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

2022-11-13 21:26:14 +08:00

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

SanjinGG

2022-11-14 09:35:41 +08:00

直接在 class 里写就行

xqk111

2022-11-14 11:03:50 +08:00

通过 className 控制

ragnaroks

2022-11-14 12:48:46 +08:00

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

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