シングルトンにReactCSSTransitionGroupを使用しようとしています

Question

bottom: +/- 100pxに移動したいと思います。

フォーカスを合わせると、上にスライドします。焦点が合っていないときは、後方にスライドします。

var component = (  
    <div key={"trayResponder_" + this.props.trayOpen} > 
    </div> 
); 

return(
    <ReactCSSTransitionGroup transitionName="tray-responder"> 
    {component} 
    </ReactCSSTransitionGroup> 
); 

をそして私はそれがthis.props.trayOpen

を更新することにより、key状態です。そして、私のレスはこのようなものです切り替える：

私は、これはrender()に反応作成しました

.tray-responder-enter { 

} 
.tray-responder-enter-active { 
    .animation(slideUp 1s ease infinite) 
} 
.tray-responder-leave { 

} 
.tray-responder-leave-active { 
    .animation(slideDown 1s ease infinite) 
} 

.keyframes(slideUp;{ 
    0% {transform: translateY(100%);} 
    50% {transform: translateY(-8%);} 
    65% {transform: translateY(4%);} 
    80% {transform: translateY(-4%);} 
    95% {transform: translateY(2%);} 
    100% {transform: translateY(0%);} 
}); 
.keyframes(slideDown;{ 
    0% {transform: translateY(-100%);} 
    50%{transform: translateY(8%);} 
    65%{transform: translateY(-4%);} 
    80%{transform: translateY(4%);} 
    95%{transform: translateY(-2%);} 
    100% {transform: translateY(0%);} 
}); 

どのanimation.less：

.keyframes(@name; @arguments) { 
    @-moz-keyframes @name { @arguments(); } 
    @-webkit-keyframes @name { @arguments(); } 
    @keyframes @name { @arguments(); } 
} 

.animation(@arguments) { 
    -webkit-animation: @arguments; 
    -moz-animation: @arguments; 
    animation: @arguments; 
} 

残念ながら、これはうまくいかないようです。何も起こらない。アニメーションはありません。なぜ本当にわからない。

更新

ReactCSSTransitionGroupとのトラブルはenter-activeとleave-activeが同時に起こるということです。あなたが不透明度を切り替えている場合、これは問題ではないようです。しかし、私のように物事を上下に動かしているのであれば、同時に両方を見ることができます。ここに見られるように

：

Answer 1

同じくらい私が理解し、出入りのためのCSSの遷移があります。ホバー上のアニメーションが必要な場合は、おそらく：ホバーセレクターを使用して達成することができます。

const TransitionDemo = React.createClass({ 
    render : function() { 
    return(
     <div className="demo"> 
     <p>Some Text Here</p> 
     </div> 
    ); 
    } 
}); 


ReactDOM.render(<TransitionDemo trayOpen={1}/>, document.getElementById('root')); 

//css 

.demo { 
    height : 100px; 
    position : relative; 
} 

.demo p { 
    position : absolute; 
    bottom : 0px; 
    transition : all 1s ease; 
} 

.demo:hover > p{ 
    bottom : 50px; 
    transition : all 1s ease; 
} 

はこのペンを参照してください：http://codepen.io/umgupta/pen/dNNLxL