ReactCSSTransitionGroup wendet keine Klassen an

Question

Nachdem ich mein Rendering von this earlier issue geändert habe, habe ich jetzt ein Problem, bei dem die Zeitüberschreitungen der Übergangsgruppe berücksichtigt werden, aber keine Klassen den untergeordneten Elementen hinzugefügt werden. Ich importiere react-addons-css -transition-group.

Hier ist der Render:

render() { 
    return (
    <section className="SocialBlock" onMouseOver={this.showIcons} onMouseLeave={this.hideIcons}> 

    <div className="socialAccounts"> 
    <ReactCSSTransitionGroup 
    transitionName="socialIcons" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300} 
    transitionAppear={true} 
    transitionAppearTimeout={300}> 

    {this.state.iconsAreVisible && 
     <div key="456"> 
     {socials.map((icon, index) => { 
     return <div className={`icon icon-${index+1}`} key={index}><InlineSVG src={icon} /></div> 
     })} 
     </div> 
    } 
    {!this.state.iconsAreVisible && 
     <div key="123"> 
     <h3>Check out the social stuff!</h3> 
     </div> 
    } 
    </ReactCSSTransitionGroup> 

    </div> 


    </section> 
    ); 
} 

Answer 1

Basierend auf Ihrer Code-Snippet erstellt ich ein JS FIDDLE

Die Übergangsklassen korrekt angewandt erhalten. Ich erhöhte den Übergang zur besseren Debuggen ein bisschen Timeouts

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; 
var socials = ['https://raw.githubusercontent.com/isaacs/npm/master/html/npm-256-square.png', 'https://wasin.io/wp-content/uploads/2015/05/showimage.png']; 

var Hello = React.createClass({ 
    getInitialState: function() { 
    return { 
     iconsAreVisible: false 
    }; 
    }, 
    hideIcons: function() { 
    this.setState({ 
     iconsAreVisible: false 
    }); 
    }, 
    showIcons: function() { 
    this.setState({ 
     iconsAreVisible: true 
    }); 
    }, 
    render() { 
    return (
     <section className="SocialBlock" onMouseOver={this.showIcons} onMouseLeave={this.hideIcons}> 
     <div className="socialAccounts"> 
      <ReactCSSTransitionGroup 
      transitionName="socialIcons" 
      transitionEnterTimeout={1000} 
      transitionLeaveTimeout={1000} 
      transitionAppear={true} 
      transitionAppearTimeout={300}> 
       {this.state.iconsAreVisible && 
       <div key="456"> 
        {socials.map((icon, index) => { 
        return <span className={'icon icon-'+index} 
           key={index}> 
           <img src={icon} height="100"/> 
          </span> 
        })} 
       </div> 
       } 
       {!this.state.iconsAreVisible && 
       <div key="123"> 
       <h3>Check out the social stuff!</h3> 
       </div> 
       } 
      </ReactCSSTransitionGroup> 
     </div> 
    </section> 
    ); 
    } 
}); 

Und die CSS:

.socialIcons-enter { 
    opacity: 0.01; 
} 
.socialIcons-enter.socialIcons-enter-active { 
    opacity: 1; 
    transition: all 1000ms cubic-bezier(0.0,0.0,0.2,1); 
} 
.socialIcons-leave { 
    opacity: 1; 
} 
.socialIcons-leave.socialIcons-leave-active { 
    opacity: 0; 
    transition: all 1000ms cubic-bezier(0.0,0.0,0.2,1); 
} 
.socialAccounts div { 
    position: absolute; 
}