// 设置动画初始样式
      setTimeout(() => {
        setNativeProps(node, {
          style: {
            transform: !visible ? 'translate(0, 0)' : v,
          },
        });
      }, 0);
      // 执行动画
      setTimeout(() => {
        transition(
          node,
          {
            transform: visible ? 'translate(0, 0)' : v,
          },
          {
            timingFunction: timingFunction,
            duration: duration,
            delay: 0,
          },
          cb,
        );
      }, 50);

设置动画初始化样式中添加：

        setNativeProps(findDOMNode(this.refPanelContainer), {
          style: {
            opacity: 1,
          },
        });

结束语

Filter 的组件看似简单，但是如果想写一个市场上较为通用和广泛的 Filter 组件，不仅仅是组件的颗粒度、耦合度和性能需要考虑，更多的是其中还是有太多的业务逻辑需要去思考。对于目前的初版（还未修改成正式开源版），已经基本涵盖了目前我们能够想到的业务场景，也已经有相关业务落地使用。

当然，对于如果是直接放到业务中使用而不作为开源组件的话，我们可已经 Panel下的 child 通过 renderPortal 降低层级，通过 EventBus 或者 redux、mobx 等管理数据状态。那样会让整个代码逻辑看起来清晰很多。但是为了降低bundle 大小，我们尽可能的减少通用包的使用以及第三方插件的依赖。

关于文章中没有提及的想法或者对于这些Filter业务需求（坑）你有更好的处理方法和想法都欢迎在评论区交流~

学习交流

关注公众号： 【全栈前端精选】 每日获取好文推荐。

公众号内回复 【1】，加入全栈前端学习群，一起交流。