Не удается создать плавную прокрутку с CSSTransition Group - PullRequest
Новая
       34

Не удается создать плавную прокрутку с CSSTransition Group

0 голосов
/ 27 марта 2020

Я пытаюсь использовать CSSTransitionGroup (или ReactTransitionGroup), чтобы создать эффект вертикальной плавной прокрутки для содержимого, как оно появляется и исчезает из домена.

Мне известны способы анимации такого эффекта с использованием перехода в чистом css, но мне нужно иметь возможность сделать это в React, когда элемент появляется в DOM, а затем покидает DOM, поэтому 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;
}

1 Ответ

1 голос
/ 27 марта 2020

Вы можете добавить белый 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 . Надеюсь, это поможет

...