CSSTransition 未在 React 中显示过渡

Question

这是我的 slideshow.jsx 文件。我正在尝试将过渡应用到包含

的示例 div

示例文本

，但没有发生转换。

import React, { Component } from 'react';<br>
import styles from '../stylesheets/style.module.css';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
class SlideShow extends Component {

 state = {
    backgroundColor: 'white',
    changePic: true,
    slideIndex: 1,
  };

render() {
 console.log(this.state.changePic);
   return (
      <div className={styles.slideshowContainer}>
        <CSSTransition
          in={this.state.changePic}
          timeout={2000}
          classNames={styles.slidePics}
          mountOnEnter={true}
        >
          <div>
            <p>sample text</p>
          </div>
        </CSSTransition>
      </div>
    );
  }
}

export default SlideShow;

这是我的 style.module.css 文件。与 slidePics 关联的以下属性如下​​。但是这些转换不起作用：-

.slidePics-enter {
  opacity: 0;
}
.slidePics-enter-active {
  opacity: 1;
  transition: opacity 2000ms;
}

Answer 1

问题是您的 css 模块中没有要映射到样式的类 slidePics。如果添加空规则.slidePics { } 即可解决问题。

其他可行的方法，您可以将您的转换映射为：

classNames={{
 enter: styles['slidePics-enter'],
 enterActive: styles['slidePics-enter-active'],
}}

更新

在给定初始状态的情况下，您已经将 in 属性设置为 true。 in 初始状态需要为 false，然后通过一些迭代，您将使用类 enter enter-active 更改为 true。

通过您的代码，您希望在挂载状态上执行转换，但正如 docs 所说，css 转换默认情况下不会在第一次挂载时执行输入转换。

为此，您需要传递appear={true} 和in={true}。同样创建 .slidePics-appear .slidePics-appear-active 类，就像为 enter 类创建的一样。