Transizioni di React.js che non funzionano per "fade out"

Ho un componente React.js che sto cercando di "sfumare" usando le Transizioni CSS di React. Sta funzionando bene per la dissolvenza in entrata, ma quando clicco per rimuovere l'oggetto, scompare immediatamente (invece del piacevole effetto dissolvenza).Transizioni di React.js che non funzionano per "fade out"

Codice:

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionAppear={true} 
    transitionLeave={true} 
    transitionEnterTimeout={600} 
    transitionAppearTimeout={600} 
    transitionLeaveTimeout={300} 
> 
    some object 
</ReactCSSTransitionGroup>

CSS:

/Reagire transizioni/

.example-enter { 
    opacity: 0.01; 
    transition: opacity .5s ease-in; 
} 

.example-enter.example-enter-active { 
    opacity: 1; 
} 

.example-leave { 
    opacity: 1; 
    transition: opacity 1s ease-in; 
} 

.example-leave.example-leave-active { 
    opacity: 0.01; 
    transition: opacity 300ms ease-in; 
} 

.example-appear { 
    opacity: 0.01; 
    transition: opacity 1s ease-in; 
} 

.example-appear.example-appear-active { 
    opacity: 1; 
}

fonte

2016-03-02 user1072337

Funziona bene? Sei sicuro che non ci siano altri errori? – Guy

Nessun errore. La dissolvenza funziona bene. Ma quando "scompare" non c'è effetto di dissolvenza. – user1072337

Non riesco a vedere alcun problema durante il tentativo di riproduzione. Vedi [qui] (http://codepen.io/guyfedwards/pen/zqvRZg?editors=0110) – Guy

ho trovato il problema nel CSS è sufficiente rimuovere la linea commentato:

.example-leave.example-leave-active { 
    opacity: 0.01; 
    /*transition: opacity 300ms ease-in;*/ 
}

fonte

2016-03-06 07:23:48 Hamid

Non vedo come quella linea possa far sparire immediatamente l'oggetto. E penso che la durata della transizione dovrebbe essere diversa per le diverse transizioni. – ArneHugo

@ArneHugo il codice è [ascolta] (http://codepen.io/guyfedwards/pen/zqvRZg?editors=0110) e ho modificato il codice e vedere il risultato. quando ho detto che la linea che mostra e nasconde sono assolutamente uguali. – Hamid

Sì, è logico, poiché la linea rimossa cambia la durata della transizione in 300 ms quando si lascia lo stato attivo. Tuttavia, sembra essere di design. Inoltre, con una durata di transizione di 300ms, l'elemento non dovrebbe "scomparire immediatamente", ma svanire oltre 300ms (che è abbastanza lungo da vederlo svanire). L'asker probabilmente ha qualche altro bug nel suo codice che causa il suo problema. – ArneHugo

Here is a working jsfiddle demo

var {CSSTransitionGroup} = React.addons; 

var Fade = React.createClass({ 
    getInitialState() { 
     return { 
      items: ["Hello"] 
     } 
    }, 
    clickHandler (e) { 
     this.setState({items:[]}); 
    }, 
    render: function() { 
     var {items} = this.state; 
     return (
      <CSSTransitionGroup transitionName="example" 
     transitionAppear={true} 
     transitionLeave={true} 
     transitionEnterTimeout={600} 
     transitionAppearTimeout={600} 
     transitionLeaveTimeout={300}> 
      {items.map(item => <div onClick={this.clickHandler}>{item}</div>)} 
     </CSSTransitionGroup> 
     ); 
    } 
}); 

ReactDOM.render(<Fade/>, document.getElementById('container'));

Credo che si stava tentando di rimuovere il nodo figlio utilizzando manipolazione del DOM. Questa transizione funzionerà solo se gli permetterete di ri-renderizzare attraverso il metodo react render.

fonte

2016-03-11 11:14:04 nikhil

Transizioni di React.js che non funzionano per "fade out"

risposta

Problemi correlati