Question

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

更多信息...我有一个页面，我想在其中显示商品并根据不同的属性（例如成本，尺寸，类别等）过滤商品。因此，我在其中使用了一个容器，并在其中连续获得了2列。

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

my sample

下面的代码中是这样的

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.github.io/utilities/transitions/）的建议。

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

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

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

1 个答案: