試圖爲單身人士使用ReactCSSTransitionGroup

我想搬東西bottom: +/- 100px。試圖爲單身人士使用ReactCSSTransitionGroup

因此，當聚焦時，它會滑落。當不專心時，它會滑落下來。

我創造了這個陣營render()：

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

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

然後我切換它的key狀態，通過更新this.props.trayOpen

然後我少即是這樣的：

.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同時發生。如果您切換不透明度，這似乎不成問題。但是如果你像我一樣上下移動，那麼你就可以同時看到兩者。

正如在這裏看到：

來源

2017-01-19 Trip

你有沒有嘗試設置transitionEnterTimeout和transitionLeaveTimeout？ –

@UG啊這絕對是朝着正確方向邁出的一步。我可能會從這裏弄清楚。 – Trip

雖然我明白，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

來源

2017-01-19 15:13:57

其實我正在尋找'：focus'。但問題在於，當你選擇div的孩子時，焦點變得模糊。任何添加/刪除類都會重新渲染整個組件，從而阻止純CSS動畫。如果我使用React CSS Transition Group，它似乎嚴格適用於不透明度0-1，而不是上下移動的東西。該怎麼辦！：D – Trip

它也適用於不透明度以外的東西。我努力了。你可以嘗試簡單的向上或向下移動transform：translateY（1000px） –

我也嘗試過，但似乎React CSS Transition Group創建了兩個浮動在彼此之上的div。因此，「進入主動」和「離開主動」同時發生。如果我正在切換不透明度，那我可以只看到一個。但是我正在移動一個項目，然後我同時看到兩邊交換。 – Trip

試圖爲單身人士使用ReactCSSTransitionGroup

回答

相關問題