React CSSTransitionGroup出现的转换仅适用于2D元素

时间:2017-04-25 00:16:31

标签: javascript css reactjs reactcsstransitiongroup

我使用React的CSSTransitionGroup(新的react-transition-group@1.1.2。我不知道为什么,但是在应用3D样式之前进行了转换。

当前行为(在Chrome和Firefox中):

  1. 对象从不透明度淡入2个对象:0到不透明度1
  2. 对象接收3D样式
  3. 预期行为:

    1. 对象接收3D样式
    2. 对象从不透明度淡入3D对象:0到不透明度1
    3. JSX:

         <CSSTransitionGroup component="div" id="container" transitionName="fadeBox" transitionAppear={true} transitionAppearTimeout={500}
                transitionEnter={false} 
                transitionLeave={false}>
      
                {this.state.projects.map((project) => {
                  return (<Link to={"/project/" + project.id} key={"/project/" + project.id}>
                    <Box imageURL={project.imageURL} text={project.text} key={project.id} /> </Link>)
                })}
      
              </CSSTransitionGroup>
      

      的CSS:

      .fadeBox-appear {
          opacity: 0.01;
          transform: translate3d(0, -2%, 0);
      }
      
      .fadeBox-appear.fadeBox-appear-active {
          opacity: 1;
          transform: translate3d(0, 0%, 0);
          transition: all 0.5s ease-in-out;
      }
      

0 个答案:

没有答案