如何为基于react-bootstrap的Column组件添加平滑的滑动过渡效果？

Question

总结一下这个问题，我正在尝试解决一个有 2 列的组件（react-bootstrap Column 组件）。左边的容器是可折叠的，右边的容器总是在那里。单击按钮，我将在左栏中切换显示/隐藏。它工作正常，但行为很粗暴。然而，我想添加过渡效果以实现更平滑的滑动行为。

更多信息...我有一个页面，我想在其中显示产品并根据不同的属性（例如成本、尺寸、类别等）过滤产品。因此，我在内部使用一个容器，并在其中一行放置 2 列。

问题：过渡不太顺利...

下面的代码是这样的，

import React, { Component } from 'react';
import { ProductsViewFilter } from '../../Controls/ProductsViewFilter/ProductsViewFilter';
import { ProductsView } from '../../Controls/ProductsView/ProductsView';
import { Container, Row, Col, Collapse } from 'react-bootstrap';
import './ProductsViewContainer.css';

export class ProductsViewContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      filterExpanded: false
    }
  }

  render() {
    return (
      <Container className='products-view-filter-container'>
        <Row>
          <Collapse in={this.state.filterExpanded}>
            <Col sm={2} className={this.state.filterExpanded ? 'products-view-filter products-view-filter-transition-slide-in' : 'products-view-filter products-view-filter-transition-slide-out'}>
              <ProductsViewFilter></ProductsViewFilter>
            </Col>
          </Collapse>
          <Col className='products-view-container-productsview'>
            <div className='slider-icon-div' >
              <img className='slider-icon' src='/images/icons/slider.svg'
                onClick={(e) => { e.preventDefault(); this.setState({ filterExpanded: !this.state.filterExpanded }); }} />
            </div>
            <ProductsView></ProductsView>
          </Col>
        </Row>
      </Container>);
  }
}

.products-view-filter-container
{
  max-width: 100% !important;
}

.products-view-filter
{
  background-color: wheat;
  transform: translateX(-150px);
  transition: transform 400ms ease-in;
}

.products-view-filter-transition-enter
{
  transform: scale(0.8);
  opacity: 0;
}

.products-view-filter-transition-enter-active 
{
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}

.products-view-filter-transition-exit
{
  opacity: 1;
}

.products-view-filter-transition-exit-active
{
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

.products-view-filter-transition-slide-in {
  transform: translateX(0);
}

.products-view-filter-transition-slide-out {
  transform: translateX(-100%);
}

.products-view-container-productsview
{
  background-color: lavender;
}

.slider-icon
{
  height: 1.5rem;
}

.slider-icon:hover
{
  cursor: pointer;
}

.slider-icon-div
{
  margin-top: 15px;
  text-align: left;
}

我希望看到类似的行为 https://codepen.io/bjornholdt/pen/MpXmmL/。

我知道通过使用一堆纯 div 可以轻松实现这一点。但是，我的愿望是使用引导组件，因为它在移动设备中具有响应能力。

关于如何实现坚持 Col 和 Row 组件并实现平滑过渡的任何建议、建议都将非常有帮助。

Answer 1

这可能为时已晚，但万一其他人也遇到这个问题...... 我自己还没有测试过，但请尝试文档（https://react-bootstrap.netlify.app/docs/utilities/transitions/）建议的内容。

... 坍塌＃ 向元素或组件添加折叠切换动画。

流畅的动画 如果您注意到动画不连贯，并且正在折叠的组件具有非零边距或填充，请尝试将内容包装在没有边距或填充的节点内，如下例所示。这将允许正确计算高度，因此动画可以顺利进行。 ...