單擊按鈕后，我的狀態會發生變化。狀態改變側邊欄的大小。
這是我用樣式組件和條件渲染制作的 CSS：
const SidebarStyled = styled.div`
width: ${this.state.sidebarOpen ? '200px' : '70px'};
position: fixed;
left: 0px;
top: 0px;
height: 100vh;
background-color: #0c1635;
display: flex;
flex-direction: column;
知道如何在條件渲染上應用過渡 0.2s 嗎？
謝謝你。
[PS : 我嘗試添加過渡：所有 0.2s 緩進出；但沒有用]
uj5u.com熱心網友回復：
添加一個像 transition:all 200ms ease-in 這樣的過渡屬性；
uj5u.com熱心網友回復：
正如我在評論中提到的，您需要傳入一個道具并將其插入以更改您的 CSS。否則，您的組件將重新渲染，并且不會應用 CSS 過渡。
const { React, ReactDOM, styled } = window;
class WontWork extends React.Component {
constructor(props) {
super(props);
this.state = { sidebarOpen: false };
}
render() {
const Sidebar = styled.div`
width: ${this.state.sidebarOpen ? "200px" : "70px"};
height: 20px;
background: red;
transition: width 1s;
`;
return (
<main>
<p>This won't work:</p>
<Sidebar />
<button
onClick={() => this.setState({ sidebarOpen: !this.state.sidebarOpen })}
>
Expand
</button>
</main>
);
}
}
const WorkingSidebar = styled.div`
width: ${(props) => (props.open ? "200px" : "70px")};
height: 20px;
background: green;
transition: width 1s;
`;
class WillWork extends React.Component {
constructor(props) {
super(props);
this.state = { sidebarOpen: false };
}
render() {
return (
<main>
<p>You need to pass in a <b>prop</b> to a predefined styled-component:</p>
<WorkingSidebar open={this.state.sidebarOpen} />
<button
onClick={() => this.setState({ sidebarOpen: !this.state.sidebarOpen })}
>
Expand
</button>
</main>
);
}
}
ReactDOM.render(
<div>
<WontWork />
<hr />
<WillWork />
</div>,
document.getElementById("app")
);<script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-is.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/dist/styled-components.min.js"></script>
<div id="app"></div>uj5u.com熱心網友回復：
嘗試這個：
你可以sidebarOpen作為道具傳遞：
<SidebarStyle sidebarOpen = {this.state.sidebarOpen}>
然后：
const sidebarStyle = styled.div`
width: ${(props) => props.sidebarOpen ? "200" : "70"};
transition: width .2s ease-in-out;
.
.
.
`
我從這里幫助過：
請參閱此處：向樣式化組件添加過渡
它在這種情況下有效嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/435184.html