CSS Module 与 ReactCSSTransitionGroup 的小坑

首先一个选择器如果没有任何内容（包括注释）css module 将不会存在该key

.modalAppear {
}
.modalAppear.modalAppearActive {
}
.modalEnter {
    /* opacity: 0.01; */
}
.modalEnter.modalEnterActive {
    opacity: 1;
    transition: opacity 200ms ease-in;
}
.modalLeave {
    opacity: 1;
}
.modalLeave.modalLeaveActive {
    opacity: 0.01;
    transition: opacity 200ms ease-in;
}

css module

{
   modalEnter: 'xxx_hash_xxx', 
   modalEnterActive: 'xxx_hash_xxx',
   modalLeave: 'xxx_hash_xxx',
   modalLeaveActive: 'xxx_hash_xxx'
}

Appear 与 Enter

• ReactCSSTransitionGroup 组件初始化挂载触发Appear
• ReactCSSTransitionGroup 内部如有新增子组件则触发Enter