css – 没有React-Router的页面转换

这应该是如此简单,但我已经打破了这几天.我正在尝试动画我的页面过渡.问题是文件SUCK.我一遍又一遍地跟着他们,尝试了各种方式,但无法让它发挥作用.

我想要做的是向右或向左优雅地滑动我的页面,并淡化正在其后面优雅地卸载的页面.简单吧？我没有在我的网页上使用React Router.

我为此尝试了各种解决方案,但问题似乎在于卸载.更换页面后,现有页面可以在转换之前卸载.我正在使用react-transition-group发布我的尝试,尽管在这一点上,我会接受任何其他有效的解决方案.我不确定react-transition-group是否在实际上得到积极维护,因为还有很多其他帖子可以帮助我做出0回复.

所以在我的app容器上我想放这样的东西：

<App>
  <PageSlider>
     <Page key={uniqueId} />  <==this will be "swapped" through (Redux) props
  </PageSlider>

因此,根据我的阅读,我必须使用TransitionGroup容器作为我的PageSlider,以便它可以管理我的页面的进入和退出.所以这里是：

class PageSlider extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TransitionGroup 
         component="div"
         id="page-slider"
         childFactory={child => React.cloneElement(child,{classNames: `page-${this.props.fromDir}`,timeout: 500}
         )}
      >
        {this.props.children}
      </TransitionGroup>

    );
  }
}

我还读过我需要做一个“童工厂”来启用现有的东西.我无法在文档中找到这样的例子.由于页面将来自不同的方向,我将向我传递我想要滑动页面的方向,这将告诉页面它获得了什么类.

现在,至于页面本身,我已经将它包装在Csstransition中.关于这一切如何传承的文档中没有很好的例子,所以我真的很困惑这里做什么：

class Page extends Component {
  constructor(props) {
    super(props);
  }

  render() {
   return (
    <Csstransition>                   <==????????
      {this.props.children}           Do props get passed down?
    </Csstransition>                  Which ones? 
 );                                   Does "in" get taken care of?
  }
}

只是为了完成样式将在CSS中应用如下：

.page {
  display: flex; 
  flex-direction: column; 
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  -webkit-transition: all 500ms ease-in-out;
  transition: all 500ms ;
}

//go from this
.page-right-enter {
  -webkit-transform: translate3d(100%,0);
  transform: translate3d(100%,0);
}

//to this
.page-right-enter-active {
  -webkit-transform: translate3d(0,0);
  transform: translate3d(0,0);
}

 //exiting go from this
    .page-right-exit {
      opacity: 1;
    }
   //to this
    .page-right-exit-active {
      opacity: 0;
    }

所有这些组件都将通过Redux连接,以便他们知道何时触发了新页面以及调用了哪个方向.

有人PLEEEEASE可以帮助我吗？我真的花了几天时间在那里尝试了每个图书馆.我并没有结合反应过渡组！任何在卸载时工作的库我都会尝试.为什么这不容易？

解决方法

好.好吧,我为WAAAAY挣扎太久了.我终于抛弃了react-transition-group,并且转向纯CSS.这是我的解决方案.

PageSlider.js

import React,{ Component } from 'react';
import PropTypes from 'prop-types';

require('./transitions.scss');

const BlankPage = (props) => <div className="placeholder"></div>;

class PageSlider extends Component {
  constructor(props) {
    super(props);
    this.state = {
       nextRoute: props.page,pages: {
        A: {key: 'A',component: BlankPage,className: 'placeholder'},B: {key: 'B',},currentPage: 'A'
    };
  }

  componentDidMount() {
    //start initial animation of incoming
    let B = {key: 'b',component: this.state.nextRoute,className: 'slideFromright'}; //new one
    let A = Object.assign({},this.state.pages.A,{className: 'slideOutLeft'}); //exiting
    this.setState({pages: {A: A,B: B},currentPage: 'B'});    
  }

  componentwillReceiveProps(nextProps) {
    if (nextProps.page != this.state.nextRoute) {
      this.transition(nextProps.page,nextProps.fromDir);
    }
  }

  transition = (Page,fromDir) => {
    if (this.state.nextRoute != Page) {
       let leavingClass,enteringClass;
       let pages = Object.assign({},this.state.pages);
       const current = this.state.currentPage; 
       const next = (current == 'A' ? 'B' : 'A');
       if (fromDir == "right") {
         enteringClass = 'slideFromright';
         leavingClass = 'slideOutLeft';
       } else {
         enteringClass = 'slideFromLeft';
         leavingClass = 'slideOutRight';
       }
       pages[next] = {key: 'unique',component: Page,className: enteringClass};
       pages[current].className = leavingClass;
       this.setState({pages: pages,nextRoute: Page,currentPage: next});  
    }
  }


  render() {
    return (
      <div id="container" style={{
        position: 'relative',minHeight: '100vh',overflow: 'hidden'
      }}>
        {React.createElement('div',{key: 'A',className: this.state.pages.A.className},<this.state.pages.A.component />)}
        {React.createElement('div',{key: 'B',className: this.state.pages.B.className},<this.state.pages.B.component />)}
       </div>
  );
  }

}


PageSlider.propTypes = {
  page: PropTypes.func.isrequired,fromDir: PropTypes.string.isrequired
};

export default PageSlider;

transition.scss

.placeholder {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    -webkit-animation: slideoutleft 0.5s forwards;
    -webkit-animation-delay: 10;
    animation: slideoutleft 0.5s forwards;
    animation-delay: 10;
}



.slideFromLeft {
    position: absolute;
    left: -100vw;
    width: 100vw;
    height: 100vh;
    -webkit-animation: slidein 0.5s forwards;
    -webkit-animation-delay: 10;
    animation: slidein 0.5s forwards;
    animation-delay: 10;
}


.slideFromright {
    position: absolute;
    left: 100vw;
    width: 100vw;
    height: 100vh;
    -webkit-animation: slidein 0.5s forwards;
    -webkit-animation-delay: 10;
    animation: slidein 0.5s forwards;
    animation-delay: 10;;
}

.slideOutLeft {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-animation: slideoutleft 0.5s forwards;
    -webkit-animation-delay: 10;
    animation: slideoutleft 0.5s forwards;
    animation-delay: 10;
}

.slideOutRight {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 100vh;
    -webkit-animation: slideoutright 0.5s forwards;
    -webkit-animation-delay: 10;
    animation: slideoutright 0.5s forwards;
    animation-delay: 10;
}

@-webkit-keyframes slidein {
    100% { left: 0; }
}

@keyframes slidein {
    100% { left: 0; }
}

@-webkit-keyframes slideoutleft {
    100% { left: -100vw; opacity: 0 }
}

@keyframes slideoutleft {
    100% { left: -100vw; opacity: 0}
}
@-webkit-keyframes slideoutright {
    100% { left: 100vw; opacity: 0}
}

@keyframes slideoutright {
    100% { left: 100vw; opacity: 0}
}

传入下一个组件,这是我的反应页面组件,调用如下：

app.js

<div id="app">
      <PageSlider page={this.state.nextRoute} fromDir={this.state.fromDir}/>
   </div>

原文地址：https://www.jb51.cc/css/215591.html

css – 没有React-Router的页面转换

解决方法

相关推荐