ReactCSSTransitionGroup не активирует переход

Question

ReactCSSTransitionGroup ничего не делает для меня, кроме как задерживать элемент, который я хочу отобразить. Я пытаюсь заставить мой компонент исчезать при загрузке страницы. Вот код, о котором идет речь:

import React from 'react'; 
import ReactCSSTransitionGroup from 'react/lib/ReactCSSTransitionGroup'; 

... 

render() { 
    if(this.state.mounted) { 
     var child = (
      <div> 
       <h1>{this.state.title}</h1> 
       <p>Description: {this.state.description}</p> 
       <p>Language(s): {this.state.lang}</p> 
      </div> 
     ); 
    } 
    else { 
     var child = null; 
    } 
    return (
     <div className="container"> 
      <ReactCSSTransitionGroup transitionAppear={true} transitionAppearTimeout={1000} transitionName="puzzle" transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
       {child} 
      </ReactCSSTransitionGroup> 
     </div> 
    ) 
} 

А вот CSS написано в SASS:

.puzzle-appear { 
    opacity: .01; 
    .puzzle-appear-active { 
     opacity: 1; 
     transition: opacity 1000ms ease-in; 
    }; 
}; 

.puzzle-enter { 
    opacity: .01; 
    .puzzle-enter-active { 
     opacity: 1; 
     transition: opacity 500ms ease-in; 
    }; 
}; 

.puzzle-leave { 
    opacity: 1; 
    .puzzle-leave-active { 
     opacity: .01; 
     transition: opacity 300ms ease-in; 
    }; 
}; 

Я попробовал несколько вещей, которые Google предоставляет, но ничего не получалось. Тем не менее, все, кажется, в порядке. Что не так с кодом?

Answer 1

Код SASS указывает, что классы активного состояния применяются к элементу внутри вашего элемента головоломки, но я не думаю, что это так.

Если вы можете видеть классы, применяемые при рендеринге, и этот бит работает нормально, то это, вероятно, проблема. Переместите неактивные стили из их текущей вложенной позиции.