V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
headsteins
V2EX  ›  程序员

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

  •  
  •   headsteins · 2022-11-12 23:46:45 +08:00 · 1889 次点击
    这是一个创建于 502 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

    9 条回复    2022-11-14 12:48:46 +08:00
    IvanLi127
        1
    IvanLi127  
       2022-11-13 01:06:01 +08:00 via Android
    我记得是有现成库可用,不过抛开 react ,你平常咋用 html+css+js 做动画的,就咋做呀。。。。大同小异
    wf18321589792
        2
    wf18321589792  
       2022-11-13 01:27:25 +08:00 via iPhone
    用 visible 控制显隐,显示的 class 加动画即可
    kid740246048
        3
    kid740246048  
       2022-11-13 03:40:15 +08:00
    简单效果的话,可以看下这个问答: https://stackoverflow.com/questions/3331353/transitions-on-the-css-display-property
    不介意使用第三方库的话,可以用 react-spring 做出更多酷炫的效果
    gogogo2000
        4
    gogogo2000  
       2022-11-13 15:32:13 +08:00
    MMMMMMMMMMMMMMMM
        5
    MMMMMMMMMMMMMMMM  
       2022-11-13 17:50:56 +08:00   ❤️ 1
    一般主流框架都是内置一些常见动画,如果不满足你的需求的话,还有 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
        6
    fengfuliu  
       2022-11-13 21:26:14 +08:00
    条件判断切换 className 在 classsName 里面写 css 过度
    SanjinGG
        7
    SanjinGG  
       2022-11-14 09:35:41 +08:00
    直接在 class 里写就行
    xqk111
        8
    xqk111  
       2022-11-14 11:03:50 +08:00
    通过 className 控制
    ragnaroks
        9
    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}
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1137 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:42 · PVG 02:42 · LAX 11:42 · JFK 14:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.