我正在嘗試使用 CSSTransitionGroup （或 ReactTransitionGroup）為內(nèi)容在 dom 中出現(xiàn)和消失時創(chuàng)建垂直平滑滾動效果。我知道在純 css 中使用過渡來動畫化這種效果的方法，但是當(dāng)一個項目出現(xiàn)在 DOM 中然后離開 DOM 時，我需要能夠在 React 中執(zhí)行此操作，因此 CSSTransitionGroup 似乎是正確的解決方案。雖然我能夠?qū)︻伾筒煌该鞫鹊葘傩赃M行動畫處理，但我未能成功對高度和/或最大高度等屬性進行動畫處理以實現(xiàn)內(nèi)容從上到下或從下到上逐漸消失。當(dāng)項目進入和離開 DOM 時，如何制作像這樣的平滑滾動效果的動畫？我當(dāng)前使用 CSSTransitionGroup 的代碼如下：class App extends React.Component { state = { random: true }; toggleItem = () => { this.setState({ random: !this.state.random }); }; render() { console.log("random", this.state.random); return ( <div> <button onClick={this.toggleItem}>toggle item</button> <br /> <CSSTransition in={this.state.random} timeout={400} classNames="alert" unmountOnExit appear enter={false} > <div class="back"> Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf </div> </CSSTransition> </div> ); }}export default App;我當(dāng)前的輸入狀態(tài)類別是：.alert-enter { height: 0px; visibility: hidden; overflow: hidden;}.alert-enter-active { height: auto; overflow: auto; visibility: visible; transition: all 300ms;}
1 回答
拉莫斯之舞
TA貢獻1820條經(jīng)驗 獲得超10個贊
您可以添加一個白色 div 和過渡來包裹您的文本 div
class App extends Component {
state = {
random: false
};
toggleItem = () => {
this.setState({
random: !this.state.random
});
};
render() {
return (
<div>
<button onClick={this.toggleItem}>toggle item</button>
<br />
<div className="back">
Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa fdasfas asdfasdf
afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads asdfasdf
asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf asdfasfa
fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads asdfads
asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd asdfasdf
asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf asdfadsf asdfads
asdfads asdfasdf asdfadsadsf world Hello adsffd asdfadfs asdfasd
asdfasdf asdfasfa fdasfas asdfasdf afdsafas asdfasd asdfasdf
<CSSTransition
in={this.state.random}
timeout={1000}
classNames="alert"
unmountOnExit
>
<div className="white" />
</CSSTransition>
</div>
</div>
);
}
}
樣式.css
.alert-enter {
transform: translateY(400px);
}
.alert-enter-active {
transform: translateY(0px);
transition: all 1000ms;
}
.alert-exit {
transform: translateY(0px);
}
.alert-exit-active {
transform: translateY(800px);
transition: all 3000ms;
}
.back {
position: relative;
overflow: hidden;
}
.white {
height: 100%;
position: absolute;
top: 0;
left: 0;
background: white;
width: 100%;
}
您可以在這里檢查CodeSandBox。希望能幫助到你
- 1 回答
- 0 關(guān)注
- 189 瀏覽
添加回答
舉報
0/150
提交
取消