ReactCSSTransitionGroupをスタイル付きコンポーネントで使用する

Question

私は伝統的なCSSの代わりにstyled-componentsを使用しています。しかし、どのようにそれがReactCSSTransitionGroupと一緒に働くことができるかわかりません。

基本的には、ReactCSSTransitionGroupはCSSリソース内の特定のクラス名を探し、ライフサイクル全体にわたってコンポーネントに適用されます。ただし、styled-componentsでは、クラス名はなく、スタイルはコンポーネントに直接適用されます。

ReactCSSTransitionGroupを使用しないことを選択することができますが、この2つの手法は互換性がないためです。しかし、私がstyled-componentsだけを使用すると、コンポーネントがアンマウントされたときにアニメーションをレンダリングできないようです。純粋なCSSなので、コンポーネントのライフサイクルにアクセスできません。

ご協力いただきありがとうございます。

Answer 1

camelCaseをCSSで試してみましょう。

.enter { 

} 
.enterActive { } 

Answer 2

あなたのリアクトアプリがブートストラップされるinjectGlobal()スタイルの成分ヘルパーメソッドを使用します。この方法では、従来のCSSを使用しているかのようにCSSセレクタをスタイルすることができます。

まず（私はv2.1の新しいクラス名の構文を使用していないしてください）react-transition-groupのためのあなたのCSSでリテラルテンプレートをエクスポートするJSファイルを作成します。あなたのその後

globalCss.js

const globalCss = ` 
    .transition-classes { 
     /* The double class name is to add more specifity */ 
     /* so that this CSS has preference over the component one. */ 
     /* Try removing it, you may not need it if properties don't collide */ 
     /* https://www.styled-components.com/docs/advanced#issues-with-specificity */ 

     &-enter&-enter { 
     } 

     &-enter&-enter-active { 
     } 

     &-exit&-exit { 
     } 

     &-exit&-exit-active { 
     } 
    } 
`; 

export default globalCss; 

をエントリ・ポイント・ファイル：

index.jsx

import { injectGlobal } from "styled-components"; 
import globalCss from "./globalCss.js"; 

injectGlobal`${ globalCss }`; // <-- This will do the trick 

ReactDOM.render(
    <Provider store={ Store } > 
     <HashRouter > 
      <Route path="/" component={ Component1 } /> 
      <Route path="/" component={ Component2 } /> 
     </HashRouter> 
    </Provider>, 
    document.getElementsByClassName("react-app")[0] 
); 

しかし、スタイル付きコンポーネントを使用する場合でも、CSS/SASS/Lessを使用してreact-trasition-groupのクラスを記述するだけで、うまく動作します。

Answer 3

CSS変数セレクタは、スタイル付きコンポーネントで使用できます。このように：

const Animation = styled(ReactCSSTransitionGroup)` 
 
    ${({ transitionName }) => `.${transitionName}-enter`} { 
 
    opacity: 0; 
 
    } 
 

 
    ${({transitionName}) => `.${transitionName}-leave`} { 
 
    opacity: 1; 
 
    } 
 
` 
 

 
const animationID = 'some-hashed-text' 
 

 
const AnimationComponent = props => (
 
    <Animation 
 
    transitionName={animationID} 
 
    transitionEnterTimeout={0.1} 
 
    transitionLeaveTimeout={2000} 
 
    > 
 
    <div>some content</div> 
 
    </Animation> 
 
)