我正在嘗試使用 CSSTransitionGroup （或 ReactTransitionGroup）為內(nèi)容在 dom 中出現(xiàn)和消失時(shí)創(chuàng)建垂直平滑滾動(dòng)效果。我知道在純 css 中使用過(guò)渡來(lái)動(dòng)畫(huà)化這種效果的方法，但是當(dāng)一個(gè)項(xiàng)目出現(xiàn)在 DOM 中然后離開(kāi) DOM 時(shí)，我需要能夠在 React 中執(zhí)行此操作，因此 CSSTransitionGroup 似乎是正確的解決方案。雖然我能夠?qū)︻伾筒煌该鞫鹊葘傩赃M(jìn)行動(dòng)畫(huà)處理，但我未能成功對(duì)高度和/或最大高度等屬性進(jìn)行動(dòng)畫(huà)處理以實(shí)現(xiàn)內(nèi)容從上到下或從下到上逐漸消失。當(dāng)項(xiàng)目進(jìn)入和離開(kāi) DOM 時(shí)，如何制作像這樣的平滑滾動(dòng)效果的動(dòng)畫(huà)？我當(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)類(lèi)別是：.alert-enter { height: 0px; visibility: hidden; overflow: hidden;}.alert-enter-active { height: auto; overflow: auto; visibility: visible; transition: all 300ms;}
1 回答
拉莫斯之舞
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超10個(gè)贊
您可以添加一個(gè)白色 div 和過(guò)渡來(lái)包裹您的文本 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)注
- 205 瀏覽
添加回答
舉報(bào)
0/150
提交
取消