Question

我正在创建一个旋转木马，有2个按钮Next和Previous。单击“下一步”时，它应从左向右滑动，单击“上一步”时，应从右向左滑动。（我不想使用任何插件）

我的React容器：

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将此状态应用于您的项目。像这样：

17/06/19 17:46:36 INFO SparkContext: Created broadcast 1 from broadcast at StreamFromS3.scala:65
17/06/19 17:47:31 WARN ClosureCleaner: Expected a closure; got com.ignitionone.es.ForEachOuput
17/06/19 17:48:19 WARN FileStreamSource: Listed 348653 file(s) in 47382.367306 ms
17/06/19 17:50:51 WARN FileStreamSource: Listed 348653 file(s) in 51272.664258 ms
17/06/19 17:55:50 WARN FileStreamSource: Listed 348707 file(s) in 50868.757278 ms
17/06/19 18:00:51 WARN FileStreamSource: Listed 348747 file(s) in 51256.287437 ms
17/06/19 18:00:51 ERROR ApplicationMaster: RECEIVED SIGNAL TERM
17/06/19 18:00:51 ERROR ApplicationMaster: Exception from Reporter thread.
org.apache.hadoop.yarn.exceptions.ApplicationAttemptNotFoundException: Application attempt appattempt_1497453419814_0060_000001 doesn't exist in ApplicationMasterService cache.
    at org.apache.hadoop.yarn.server.resourcemanager.ApplicationMasterService.allocate(ApplicationMasterService.java:439)
    at org.apache.hadoop.yarn.api.impl.pb.service.ApplicationMasterProtocolPBServiceImpl.allocate(ApplicationMasterProtocolPBServiceImpl.java:60)
    at org.apache.hadoop.yarn.proto.ApplicationMasterProtocol$ApplicationMasterProtocolService$2.callBlockingMethod(ApplicationMasterProtocol.java:99)
    at org.apache.hadoop.ipc.ProtobufRpcEngine$Server$ProtoBufRpcInvoker.call(ProtobufRpcEngine.java:616)
    at org.apache.hadoop.ipc.RPC$Server.call(RPC.java:982)
    at org.apache.hadoop.ipc.Server$Handler$1.run(Server.java:2049)
    at org.apache.hadoop.ipc.Server$Handler$1.run(Server.java:2045)
    at java.security.AccessController.doPrivileged(Native Method)
    at javax.security.auth.Subject.doAs(Subject.java:422)
    at org.apache.hadoop.security.UserGroupInformation.doAs(UserGroupInformation.java:1698)
    at org.apache.hadoop.ipc.Server$Handler.run(Server.java:2045)

    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:62)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
    at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
    at org.apache.hadoop.yarn.ipc.RPCUtil.instantiateException(RPCUtil.java:53)
    at org.apache.hadoop.yarn.ipc.RPCUtil.unwrapAndThrowException(RPCUtil.java:101)
    at org.apache.hadoop.yarn.api.impl.pb.client.ApplicationMasterProtocolPBClientImpl.allocate(ApplicationMasterProtocolPBClientImpl.java:79)
    at sun.reflect.GeneratedMethodAccessor67.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:498)
    at org.apache.hadoop.io.retry.RetryInvocationHandler.invokeMethod(RetryInvocationHandler.java:191)
    at org.apache.hadoop.io.retry.RetryInvocationHandler.invoke(RetryInvocationHandler.java:102)
    at com.sun.proxy.$Proxy19.allocate(Unknown Source)
    at org.apache.hadoop.yarn.client.api.impl.AMRMClientImpl.allocate(AMRMClientImpl.java:277)
    at org.apache.spark.deploy.yarn.YarnAllocator.allocateResources(YarnAllocator.scala:260)
    at org.apache.spark.deploy.yarn.ApplicationMaster$$anon$1.run(ApplicationMaster.scala:458)
Caused by: org.apache.hadoop.ipc.RemoteException(org.apache.hadoop.yarn.exceptions.ApplicationAttemptNotFoundException): Application attempt appattempt_1497453419814_0060_000001 doesn't exist in ApplicationMasterService cache.
    at org.apache.hadoop.yarn.server.resourcemanager.ApplicationMasterService.allocate(ApplicationMasterService.java:439)
    at org.apache.hadoop.yarn.api.impl.pb.service.ApplicationMasterProtocolPBServiceImpl.allocate(ApplicationMasterProtocolPBServiceImpl.java:60)
    at org.apache.hadoop.yarn.proto.ApplicationMasterProtocol$ApplicationMasterProtocolService$2.callBlockingMethod(ApplicationMasterProtocol.java:99)
    at org.apache.hadoop.ipc.ProtobufRpcEngine$Server$ProtoBufRpcInvoker.call(ProtobufRpcEngine.java:616)
    at org.apache.hadoop.ipc.RPC$Server.call(RPC.java:982)
    at org.apache.hadoop.ipc.Server$Handler$1.run(Server.java:2049)
    at org.apache.hadoop.ipc.Server$Handler$1.run(Server.java:2045)
    at java.security.AccessController.doPrivileged(Native Method)
    at javax.security.auth.Subject.doAs(Subject.java:422)
    at org.apache.hadoop.security.UserGroupInformation.doAs(UserGroupInformation.java:1698)
    at org.apache.hadoop.ipc.Server$Handler.run(Server.java:2045)

    at org.apache.hadoop.ipc.Client.call(Client.java:1475)
    at org.apache.hadoop.ipc.Client.call(Client.java:1412)
    at org.apache.hadoop.ipc.ProtobufRpcEngine$Invoker.invoke(ProtobufRpcEngine.java:229)
    at com.sun.proxy.$Proxy18.allocate(Unknown Source)
    at org.apache.hadoop.yarn.api.impl.pb.client.ApplicationMasterProtocolPBClientImpl.allocate(ApplicationMasterProtocolPBClientImpl.java:77)
... 9 more

你的css看起来应该是这样的（注意我使用样式组件来表示一些元素）：

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>
    )
}

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

希望这有帮助

React中幻灯片动画的方向

1 个答案: