1

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

因此，当聚焦时，它会向上滑动。当不聚焦时，它会滑回。

我创建了这个 React render()：

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

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

然后我key通过更新切换它的状态this.props.trayOpen

然后我的 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。如果您要切换不透明度，这似乎不是问题。但是，如果您像我一样上下移动事物，那么您会同时看到两者。

如此处所示：

在此处输入图像描述

4

1 回答 1

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

于 2017-01-19T15:13:57.990 回答