我正在尝试使用React和React.addons.CSSTransitionGroup创建一个带有动画的水平滚动页面导航.目前我可以进行水平滚动(使用flexBox),页面打开/关闭,动画进入和离开.但动画并不是我想要的.

看看this example(jsfiddle).

当您单击上一页上的按钮时,它当前会将离开屏幕的页面向右推.虽然正确的结果是在同一个地方动画离开页面.我不知道如何使用CSSTransitionGroup实现这种效果,或者知道它是否可以使用它.

function generateId() {
  var r = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
  for (var i = 0; i < 10; i += 1) {
    r += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return r;
}

var PageList = {
  pages: [],listener: function(newpages) {},open: function(caption,index) {
    if (index != null) {
      this.pages = this.pages.slice(0,index + 1);
    }
    this.pages.push({
      id: generateId(),caption: caption,width: (150 + Math.random() * 50) | 0
    });
    this.listener(this.pages);
  }
};
PageList.open("Main");

var PageLink = React.createClass({
  render: function() {
    var self = this;
    return React.DOM.button({
      className: "pagelink",onClick: function() {
        PageList.open(self.props.caption,self.props.pageIndex);
      }
    },self.props.caption);
  }
});

var Page = React.createClass({
  render: function() {
    return React.DOM.article({
        className: "page",style: {
          width: this.props.page.width + "px"
        }
      },React.DOM.h1({},this.props.page.caption),React.createElement(PageLink,{
        caption: "Alpha",pageIndex: this.props.index
      }),{
        caption: "Beta",{
        caption: "Gamma",pageIndex: this.props.index
      })
    );
  }
});

var Pages = React.createClass({
  componentDidMount: function() {
    var self = this;
    PageList.listener = function(pages) {
      self.setState({
        pages: pages
      });
    };
  },getInitialState: function() {
    return {
      pages: PageList.pages
    };
  },render: function() {
    var pages = this.state.pages.map(function(page,index) {
      return React.createElement(Page,{
        key: page.id,index: index,page: page
      });
    });
    return React.createElement(
      React.addons.CSSTransitionGroup,{
        component: "section",className: "pages",transitionName: "fall"
      },pages);
  }
});

React.initializeTouchEvents(true);
React.render(
  React.createElement(Pages),document.getElementById("main")
);

/* animation */

.fall-enter {
  transform: translate(0,-100%);
  transform: translate3d(0,-100%,0);
}
.fall-enter.fall-enter-active {
  transform: translate(0,0);
  transform: translate3d(0,0);
  transition: transform 1s ease-out;
}
.fall-leave {
  index: -1;
  transform: translate(0,0);
  transition: transform 1s ease-in;
}
.fall-leave.fall-leave-active {
  transform: translate(0,100%);
  transform: translate3d(0,100%,0);
}
/* other */

* {
  Box-sizing: border-Box;
}
.pagelink {
  padding: 5px;
  margin: 5px 0px;
  width: 100%;
}
.pages {
  display: flex;
  flex-flow: row;
  overflow-x: scroll;
  overflow-y: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ddd;
}
.pages:after {
  flex: none;
  -webkit-flex: none;
  display: block;
  content: " ";
  width: 100px;
}
.page {
  flex: none;
  -webkit-flex: none;
  margin: 8px;
  padding: 10px 31px;
  background: #fff;
  overflow: auto;
  Box-shadow: 2px 1px 4px rgba(0,0.2);
  border-radius: 3px;
}