ReactCSSTransitionGroup geçişi etkinleştirmiyor

Question

ReactCSSTransitionGroup görüntülemek istediğim öğeyi geciktirmek dışında benim için hiçbir şey yapmıyor. Sayfam yüklendikten sonra bileşenimin kaybolmasına çalışıyorum. Burada

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> 
    ) 
} 

Ve SUKDÖ'nün yazılmış CSS edilir: Burada söz konusu kodudur

.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 sunduğu şeylerin bir dizi denedim, ama hiçbir şey çalıştı. Yine de her şey yolunda görünüyor. Kodun nesi yanlış?

Answer 1

SASS kodu, aktif durum sınıflarının bulmaca öğenizdeki bir öğeye uygulandığını önerir, ancak durumun böyle olduğunu düşünmüyorum.

Oluşturduğunuz sırada uygulanan sınıfları ve bu bitin iyi çalıştığını görüyorsanız, muhtemelen sorun budur. Aktif stilleri mevcut yuvalanmış konumlarından dışarı taşır.