css - 在 React 中动画 div(进入和退出)

Question

我想在 React 中构建一个简单的“旋转木马”。我有一个我希望用户回答的问题列表。当您点击 next , 它显示下一个问题。我还想添加 previous按钮在未来。目前正在显示的元素的动画有效。

但是在移动设备上，当它从一个 div 动画到另一个 div 时，屏幕会向上跳动(有轻微的延迟)

parent div 的高度总是一样的，为什么会跳？

JSX

{ this.state.activeIndex === 0 &&
    <div className="surveyContainer--surveyList__animate">
        <div>
            <SelectField labels={data.meat.labels} value={this.props.survey.meat}/>
        </div>
        <div>
            <Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
        </div>
    </div>
}

{this.state.activeIndex === 1 &&
    <div className="surveyContainer--surveyList__animate">
        <div>
            <SelectField labels={data.energy.labels} value={this.props.survey.energy}/>
        </div>
        <div>
            <Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
        </div>
    </div>
}

<SelectField/>和 Button都是自定义组件。

CSS

.surveyContainer--surveyList__animate {
  animation: slide-in 0.4s ease;
}

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(200px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

如何修复跳跃？还有什么可能是完成这整件事的更好方法？如果我想添加 previous按钮，然后切换动画将是一项费力的功能。

Answer 1

编辑:对于跳转问题，尝试将父容器的位置设置为relative，然后，对于子容器:

.child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

我推荐 ReactTransitionGroup: https://reactcommunity.org/react-transition-group/css-transition

你的代码看起来像这样:

import { CSSTranstion } from 'react-transition-group' 
<CSSTranstion in={this.state.activeIndex === 0} timeout={200} classNames="survey-list" unmountOnExit>
    <div className="survey-list">
        <div>
            <SelectField labels={data.meat.labels} value={this.props.survey.meat}/>
        </div>
        <div>
            <Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
        </div>
    </div>
</CSSTransition>

<CSSTranstion in={this.state.activeIndex === 1} timeout={200} classNames="survey-list" unmountOnExit>
    <div className="survey-list">
        <div>
            <SelectField labels={data.energy.labels} value={this.props.survey.energy}/>
        </div>
        <div>
            <Button handleClick={() => this.handleActiveIndex(2)} label="Next"/>
        </div>
    </div>
</CSSTransition>

然后是你的 CSS:

.survey-list {
  opacity: 1;
  transform: translateX(0);
}

.survey-list.survey-list-enter {
  opacity: 0;
  transform: translateX(200px);
}
.survey-list.survey-list-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 200ms;
}
.survey-list.survey-list-exit {
  opacity: 1;
}
.survey-list.survey-list-exit-active {
  opacity: 0;
  transform: translateX(-200px);
  transition: opacity 200ms;
}

而且我不能完全确定您的意图的广度，但您可能还想查看 TransitionGroup，因为它会在切换进出时自动向一组子级添加类: https://reactcommunity.org/react-transition-group/transition-group

作为旁注，如果您在 CSS 中使用 BEM，则不应(即 surveyContainer--survey-list)将修饰符用作 block 。如果 survey-list 有自己的元素，就允许它成为自己的 block 。它可以防止长时间混淆类。