当前位置: 首页 > news >正文

React整理总结(四)

1.过渡动画react-transition-group

  • Transition 与平台无关,不一定使用css实现
  • CSSTransition组件,in属性控制展示隐藏,添加className;有三个状态appear | enter | exit
    • 第一类,开始状态:对于的类是-appear、-enter、exit;
    • 第二类:执行动画:对应的类是-appear-active、-enter-active、-exit-active;
    • 第三类:执行结束:对应的类是-appear-done、-enter-done、-exit-done;
  • SwitchTransition可以完成两个组件之间切换的炫酷动画:
    • SwitchTransition中主要有一个属性:mode,有两个值in-out:表示新组件先进入,旧组件再移除;out-in:表示就组件先移除,新组建再进入;

2.CSS 编写

  • 内联样式
  • css文件引入
  • cssmodule, 文件命名xxx.module.css
  • css in js, 如styled-component
    • props可以被传递给styled组件。获取props需要通过${}传入一个插值函数,props会作为该函数的参数;这种方式可以有效的解决动态样式的问题;
    • 添加attrs属性
  • 动态添加css,如classnames
http://www.lryc.cn/news/237090.html

相关文章:

  • ajax,axios,fetch
  • Java值传递和引用传递
  • FPGA_IIC代码-正点原子 野火 小梅哥 特权同学对比写法(1)
  • LabVIEW编程开发NI-USRP
  • ES6中实现继承
  • 车载通信架构 —— 新车载总线类型下(以太网)的通信架构
  • ArkTS - HarmonyOS服务卡片(创建)
  • Zotero在word中插入带超链接的参考文献/交叉引用/跳转参考文献
  • 持续集成部署-k8s-配置与存储-配置管理:ConfigMap 的热更新
  • Python文本段落翻译
  • Flink(七)【输出算子(Sink)】
  • 【自我管理】To-do list已过时?学写Done List培养事业成功感
  • 优思学院|什么是精益生产管理?从一个生活上的故事出发来说明。
  • Swagger-----knife4j框架
  • 企业数字化过程中数据仓库与商业智能的目标
  • 从零开始写一个APM监控程序(一)协议
  • UDP网络套接字编程
  • 【苏州元德维康生物医药-注册】
  • 从零带你底层实现unordered_map (1)
  • 第六届浙江省大学生网络与信息安全竞赛 2023年 初赛/决赛 WEB方向 Writeup
  • 设计模式篇---装饰模式
  • JAXB:根据Java文件生成XML schema文件
  • opencv(5): 滤波器
  • 《微信小程序开发从入门到实战》学习二十二
  • LLM模型-讯飞星火与百度文心api调用
  • AIGC ChatGPT 4 将数据接口文件使用Python进行入库Mysql
  • Loguru:一个超酷的Python库
  • cloud的概念
  • 物联网赋能:WIFI HaLow在无线连接中的优势
  • 淘宝商品详情数据接口(Taobao.item_get)