作为一个基础组件，Button 的设计相对比较朴素和简单易用。

但也提供了一些诸如 icon 属性、ButtonGroup 组件之类的扩充来丰富组件的功能，特别值得一提的是 Wave 组件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Button extends React.Component<ButtonProps, ButtonState> {
	render () {
		return (
      <Wave>
        <button
          {...otherProps as NativeButtonProps}
          type={htmlType}
          className={classes}
          onClick={this.handleClick}
          ref={this.saveButtonRef}
        >
          {iconNode}
          {kids}
        </button>
      </Wave>
    );
	}
}

Wave 组件

顾名思义，该组件能够实现：其内部子组件点击时的背景/边界色向外扩散波浪动画效果，比如 Button、Switch 按钮都使用了该通用组件。

  1. 组件加载时
    • 获取子组件的边界色/背景色值
    • 取消正在进行的动画
    • 并在子组件上绑定点击事件方法，该方法是具体实现动画的方法，返回取消该点击事件的实例。
  2. 动画的具体实现：
    • 文档流中插入 style 标签设置 css 变量 --antd-wave-shadow-color：waveColor
    • 如果不在子组件插入新的节点，则通过 子组件属性 ant-click-animating-without-extra-node=true，使子组件的after伪元素上动画生效
    • 如果插入新的节点，则在该节点上设置属性ant-click-animating=true，使得插入节点动画生效
    • 绑定动画开始和结束的事件，清理一些可能产生的副作用