无法使用 CSSTransition Group 创建平滑滚动

Question

我正在尝试使用 CSSTransitionGroup （或 ReactTransitionGroup）为内容在 dom 中出现和消失时创建垂直平滑滚动效果。我知道在纯 css 中使用过渡来动画化这种效果的方法，但是当一个项目出现在 DOM 中然后离开 DOM 时，我需要能够在 React 中执行此操作，因此 CSSTransitionGroup 似乎是正确的解决方案。虽然我能够对颜色和不透明度等属性进行动画处理，但我未能成功对高度和/或最大高度等属性进行动画处理以实现内容从上到下或从下到上逐渐消失。当项目进入和离开 DOM 时，如何制作像这样的平滑滚动效果的动画？我当前使用 CSSTransitionGroup 的代码如下：class App extends React.Component {  state = {    random: true  };  toggleItem = () => {    this.setState({      random: !this.state.random    });  };  render() {    console.log("random", this.state.random);    return (      <div>        <button onClick={this.toggleItem}>toggle item</button>        <br />        <CSSTransition          in={this.state.random}          timeout={400}          classNames="alert"          unmountOnExit          appear          enter={false}        >          <div class="back">            Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf            afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf            asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa            fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads            asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf            asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads            asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd            asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf          </div>        </CSSTransition>      </div>    );  }}export default App;我当前的输入状态类别是：.alert-enter {  height: 0px;  visibility: hidden;  overflow: hidden;}.alert-enter-active {  height: auto;  overflow: auto;  visibility: visible;  transition: all 300ms;}

Answer 1

您可以添加一个白色 div 和过渡来包裹您的文本 div

class App extends Component {

state = {

    random: false

  };

  toggleItem = () => {

    this.setState({

      random: !this.state.random

    });

  };

  render() {

    return (

      <div>

        <button onClick={this.toggleItem}>toggle item</button>

        <br />

        <div className="back">

          Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf

          afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf

          asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa

          fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads

          asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf

          asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads

          asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd

          asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf

          <CSSTransition

            in={this.state.random}

            timeout={1000}

            classNames="alert"

            unmountOnExit

          >

            <div className="white" />

          </CSSTransition>

        </div>

      </div>

    );

  }

}

样式.css

.alert-enter {

  transform: translateY(400px);

}

.alert-enter-active {

  transform: translateY(0px);

  transition: all 1000ms;

}

.alert-exit {

  transform: translateY(0px);

}

.alert-exit-active {

  transform: translateY(800px);

  transition: all 3000ms;

}

.back {

  position: relative;

  overflow: hidden;

}

.white {

  height: 100%;

  position: absolute;

  top: 0;

  left: 0;

  background: white;

  width: 100%;

}

您可以在这里检查CodeSandBox。希望能帮助到你