Czy można zareagować na animację ukrytego/usuniętego komponentu?

Question

Wiem, że używając ReactCSSTransitionGroup możesz zastosować go do listy przedmiotów i animować, gdy pojawiają się lub znikają. A co z pojedynczym komponentem?

Zobacz JSFiddle tutaj, gdzie mam animację CSS, gdy element pojawia się. Ale nie wiem, czy jest jakiś sposób, aby uczynić go ożywionym, gdy zostanie ukryty.

https://jsfiddle.net/eq263rk2/

Answer 1

pewno! Wystarczy użyć warianty enter i leave (choć zawsze należy uczynić składnik TransitionGroup):

var TheThing = React.createClass({ 
    render() { 
     var component; 
     if (this.props.visible) { 
      component = <div className="the-thing">The Thing</div>; 
     } 

     return (
      <ReactCSSTransitionGroup transitionName="thing"> 
       {component} 
      </ReactCSSTransitionGroup> 
     ) 
    } 
}); 

i

.thing-enter { 
    opacity: 0.01; 
    transition: opacity 1s ease-in; 
} 

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

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

.thing-leave.thing-leave-active { 
    opacity: 0.01; 
} 

Przykład: https://jsfiddle.net/BinaryMuse/3fkso0kq/