Как добавить эффект плавного скользящего перехода к компоненту Column на основе реакции-начальной загрузки? - PullRequest
Новая
       75

Как добавить эффект плавного скользящего перехода к компоненту Column на основе реакции-начальной загрузки?

1 голос
/ 28 октября 2019

Чтобы подвести итог проблемы, я пытаюсь работать с компонентом, который имеет 2 столбца (компонент Колонка реакции-начальной загрузки). Левый контейнер разборный, а правый всегда есть. Одним нажатием кнопки я переключаю показ / скрытие в левой колонке. Это работает хорошо, но поведение является грубым. Принимая во внимание, что я хочу добавить эффект перехода, чтобы добиться более плавного поведения слайдов.

Подробнее ... У меня есть страница, на которой я хочу отобразить продукты и отфильтровать продукты по разным свойствам, таким как стоимость, размер, категория и т. Д. Итак, я использую контейнер внутри и получил 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 с плавными переходами, будет действительно полезным.

...