尝试将 ReactCSSTransitionGroup 用于单例

Question

我想搬东西bottom: +/- 100px。

以便在聚焦时向上滑动。不聚焦时，它会向下滑动。

我创建了这个 React render() :

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

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

然后我通过更新 this.props.trayOpen

切换它的 key 状态

然后我的Less是这样的:

.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过渡是进入和离开。你想要悬停时的动画，这可能可以通过使用 :hover 选择器来实现。

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

尝试将 ReactCSSTransitionGroup 用于单例

Trying to use ReactCSSTransitionGroup for a Singleton

css-animations

ecmascript-6

reactjs

reactcsstransitiongroup