Question

我尝试使用React和react-transition-group包构建自定义轮播。核心功能正在发挥作用，但我正在努力编写CSS以同时执行旧项目的左侧滑出并保留新项目的滑入。任何建议将不胜感激！我在下面列出了失败的尝试。

HTML

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { showModal } from '../actions';
import { CSSTransition, TransitionGroup } from 'react-transition-group'

class FeatureCarousel extends Component {
  constructor(props) {
    super(props);
    this.state = { activeIndex: 0 };
    ...
  }

  ...

  componentDidMount() {
    this.progressSlideshow();
  }

  progressSlideshow() {
    this.timeout = setTimeout(function () {
      this.next();
      this.progressSlideshow();
    }.bind(this), 3000);
  }

  ...

  render() {
    const { activeIndex } = this.state;
    const { articles, level } = this.props;

    const slides = articles.map((article, index) => {
      let { urlToImage, title } = article;

      return (
        <CSSTransition
          key={index}
          classNames="slide"
          timeout={{ enter: 500, exit: 500 }}>
          <div
            key={index}
            className="carousel-item"
            onMouseEnter={this.handleMouseEnter}
            onMouseLeave={this.handleMouseLeave} >
            <div className="image-wrapper">
              <img src={urlToImage} alt={title} />
            </div>
            <div className="carousel-caption d-md-block">
              <h4>{title}</h4>
            </div>
          </div>
        </CSSTransition>
      )
    })

    return (
        <div className="carousel slide" data-ride="carousel">
          <div className="carousel-inner">
            <TransitionGroup>
              {slides[activeIndex]}
            </TransitionGroup>
          </div>
          <a className="carousel-control-prev" role="button" onClick={e => this.previouse()}>
            <span className="carousel-control-prev-icon" aria-hidden="true" />
            <span className="sr-only">Previous</span>
          </a>
          <a className="carousel-control-next" role="button" onClick={() => this.next()}>
            <span className="carousel-control-next-icon" aria-hidden="true" />
            <span className="sr-only">Next</span>
          </a>
        </div>
    );
  }
}

export default connect(null, { showModal })(FeatureCarousel);

CSS

.slide-enter {
    transform: translate(-100%);
}
.slide-enter.slide-enter-active {
    transform: translate(0%);
    transition: transform 500ms ease-in-out;
}
.slide-leave {
    transform: translate(-100%);
}
.slide-leave.slide-leave-active {
    transform: translate(0%);
    transition: transform 500ms ease-in-out;
}

Answer 1

我的自定义图库存在同样的问题，下面我粘贴了我的样式。
move-next：从右侧显示下一张幻灯片
move-prev：显示左侧的下一张幻灯片

主要思想是使用position：absolute for invisible slide

 .move-next {
    .slide-enter {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        transform: translate(100%, 0);
        opacity: 0;
    }

    .slide-enter-active {
        transform: translate(0, 0);
        transition: all $animateInterval ease;
        opacity: 1;
    }

    .slide-exit{
        transform: translate(0, 0);
        opacity: 1;
    }

    .slide-exit-active{
        transition: all $animateInterval ease;
        transform: translate(-100%, 0);
        opacity: 0;
    }
}

.move-prev {
    .slide-enter{
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        opacity: 0;
        transform: translate(-100%, 0);
    }

    .slide-enter-active{
        transition: all $animateInterval ease;
        opacity: 1;
        transform: translate(0, 0);
    }

    .slide-exit{
        opacity: 1;
        transform: translate(0, 0);
    }

    .slide-exit-active{
        transition: all $animateInterval ease;
        opacity: 0;
        transform: translate(100%, 0);
    }
}

react-transition Carousel CSS for react-transition-group

1 个答案: