React中Slide动画的方向

Question

我正在创建一个轮播，并且有 2 个按钮 Next 和 Previous。单击下一步它应该从左向右滑动，单击上一个它应该从右向左滑动。 （我不想使用任何插件）

我的反应容器：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { prevItem, nextItem, initItem } from '../actions/index';
import { bindActionCreators } from 'redux';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

class Carousel extends Component{

    previous(){
        this.props.prevItem();
    }

    next(){
        this.props.nextItem();
    }


    componentDidMount(){
        this.props.initItem();
    }

    renderItem(){
        const  {item} = this.props;
        const webLink = `http://${item.link}`;
        const transitionOptions = {
            transitionName: 'slide',
            transitionEnterTimeout: 1000,
            transitionLeaveTimeout: 1000
        };


        return(
            <CSSTransitionGroup {...transitionOptions}>
                <div className="carousel__item" key={item.id}>
                    <img className="carousel__image" src={item.imageurl}/>
                    <div className="carousel__text">
                        <h3>{item.title}</h3>
                        <p>{item.synopsis}</p>
                        <a href={webLink} target="_black">{item.link}</a>
                    </div>
                </div>
            </CSSTransitionGroup>
        )

    }
    render(){


        return(

                <div className="carousel">
                    {this.renderItem()}
                    <div className="carousel__prev" onClick={this.previous.bind(this)}>
                        <i className="fa fa-chevron-left"></i>
                    </div>
                    <div className="carousel__next" onClick={this.next.bind(this)}>
                        <i className="fa fa-chevron-right"></i>
                    </div>
                </div>

        )
    }
}

function mapStateToProps(state){
    return {item: state.item};
}

function mapDispatchToProps(dispatch){
    return bindActionCreators({
        initItem: initItem,
        nextItem: nextItem,
        prevItem: prevItem
    }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Carousel);

我的任何 Style.css 是：

.carousel{
    width: 100%;
    border: 1px solid #ccc;
    margin-top: 100px;
    position: relative;
}

.carousel__item{
    width: 100%;
    color: #fff;
    position: relative;
}

.carousel__item img{
    width: 100%;
    background: rgba(0,0,0,.6);
}

.carousel__text{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.carousel__text a:hover,
.carousel__text a{
    color: #fff;
}

.carousel__prev{
    position: absolute;
    left: 0;
    top: 50%;
    color: #fff;
    margin-left: 10px;
    cursor: pointer;
    font-size: 25px;
}

.carousel__next{
    position: absolute;
    right: 0;
    top: 50%;
    color: #fff;
    margin-right: 10px;
    cursor: pointer;
    font-size: 25px;
}

.slide-enter{
    transform: translate(100%);
}

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

.slide-leave{
    transform: translate(0%);
}

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

除了方向之外，当前的幻灯片动画不正确。当它滑动时，上一张幻灯片显示在下面。所以基本上 2 张幻灯片在过渡时显示在屏幕上。你知道如何解决这个问题并解决幻灯片的方向吗？

Answer 1

我刚刚解决了这个问题。

为了向正确的方向滑动，您需要保持一些状态并通过 className 将此状态应用于您的项目。像这样的：

render () {
    <CSSTransitionGroup
        component={MenuWrapper}
        transitionName="slide"
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}>
        {this._renderMenu(this.props.selectedSubMenus[menuIdx], menuIdx)}
      </CSSTransitionGroup>
}


_renderMenu = (menu, idx) => {
    return (
        <Menu key={idx} className={this.state.animationDirection} order={idx}>
            content      
       </Menu>
    )
}

你的 css 应该看起来像这样（注意我对一些元素使用了 styled-components）：

const menuWidth = "256px";
const MenuWrapper = styled.div`
    display: flex;
    overflow: hidden;
    max-width: ${menuWidth};
`

const Menu = styled.div`
    min-width: ${menuWidth};
    order: ${props => props.order};
`
.slide-enter.left {
    transform: translate(-100%);
}
.slide-enter.slide-enter-active.left {
    transform: translate(0%);
    transition: transform 500ms ease-in-out;
}
.slide-leave.left {
    transform: translate(-100%);
}
.slide-leave.slide-leave-active.left {
    transform: translate(0%);
    transition: transform 500ms ease-in-out;
}
.slide-enter.right {
    transform: translate(0%);
}
.slide-enter.slide-enter-active.right {
    transform: translate(-100%);
    transition: transform 500ms ease-in-out;
}
.slide-leave.right {
    transform: translate(0%);
}
.slide-leave.slide-leave-active.right {
    transform: translate(-100%);
    transition: transform 500ms ease-in-out;
}

请注意，我使用 flexbox 来解决显示问题（以及一些硬编码的宽度）

希望对你有帮助