CSSTransition 不显示 React 中的过渡

Question

这是我的 slideshow.jsx file.I 我正在尝试将过渡应用于包含

示例文本

的示例 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 file.Following 与 slidePics 关联的属性 below.But 这些转换不起作用：-

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

Answer 1

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

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

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

更新

给定初始状态，您已经将 in 属性设置为 true。 in 初始状态需要为 false，然后通过一些迭代，您将使用 classes enter enter-active.

更改为 true

根据您的代码，您希望在挂载状态下执行转换，但正如 docs 所述，css 转换默认情况下不会在第一次挂载时执行进入转换。

要做到这一点，您需要通过 appear={true} 和 in={true}。同样创建 classes .slidePics-appear .slidePics-appear-active 就像 enter classes.

CSSTransition 不显示 React 中的过渡

CSSTransition not showing transitions in React

css-transitions

reactjs

react-transition-group