当前位置:首页 > 编程笔记 > 正文
已解决

React整理总结(四)

来自网友在路上 163863提问 提问时间:2023-11-21 01:21:02阅读次数: 63

最佳答案 问答题库638位专家为你答疑解惑

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
查看全文

99%的人还看了

猜你感兴趣

版权申明

本文"React整理总结(四)":http://eshow365.cn/6-40764-0.html 内容来自互联网,请自行判断内容的正确性。如有侵权请联系我们,立即删除!