ant-design源码阅读 4 — Button 组件
作为一个基础组件,Button
的设计相对比较朴素和简单易用。
但也提供了一些诸如 icon
属性、ButtonGroup
组件之类的扩充来丰富组件的功能,特别值得一提的是 Wave
组件。
1 | class Button extends React.Component<ButtonProps, ButtonState> { |
Wave 组件
顾名思义,该组件能够实现:其内部子组件点击时的背景/边界色向外扩散波浪动画效果,比如 Button、Switch
按钮都使用了该通用组件。
- 组件加载时
- 获取子组件的边界色/背景色值
- 取消正在进行的动画
- 并在子组件上绑定点击事件方法,该方法是具体实现动画的方法,返回取消该点击事件的实例。
- 动画的具体实现:
- 文档流中插入
style
标签设置 css 变量--antd-wave-shadow-color:waveColor
- 如果不在子组件插入新的节点,则通过 子组件属性
ant-click-animating-without-extra-node=true
,使子组件的after
伪元素上动画生效 - 如果插入新的节点,则在该节点上设置属性
ant-click-animating=true
,使得插入节点动画生效 - 绑定动画开始和结束的事件,清理一些可能产生的副作用
- 文档流中插入