我正在使用 React 構建一個個人投資組合網頁，并且我正在嘗試更新 div 元素的內容，但是當元素更新時，我想涉及樣式，（例如在左側退出的舊內容和新內容從左邊進入）對不起我的英語不好。 這是我正在嘗試更新和添加樣式的部分
我嘗試將 componentDidMount 方法與更改標題的函式一起使用，但我不知道如何添加影片/樣式...
export default class Home extends Component {
skills_section_update = () => {
let heading = document.getElementById('heading');
const headings = [
{
head: 'Web Development'
},
{
head: 'Game Development'
}
];
const update_head = (index) => {
heading.innerText = headings[index].head;
};
update_head(1);
}
componentDidMount = () => {
setInterval(this.skills_section_update, 2000);
};
我是 React 的新手，所以任何幫助都將不勝感激。:)
uj5u.com熱心網友回復：
我不知道是否有使用 React 的特殊方法來執行此操作，但我知道您無法使用 CSS 為 DOM 元素的內容設定影片。我建議將更新后的內容添加到當前元素旁邊的另一個 DOM 元素中div，然后為這兩個元素設定影片以進行良好的過渡。
例如，您可以執行以下操作：
.container {
width: 400px;
height: 400px;
border: #000 solid 1px;
position: relative;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
transition: all .25s ease-in-out;
}
.container:hover .content {
transform: translateY(-100%);
transition: all .25s ease-in-out;
}
.original {
background-color: wheat;
}
.next {
background-color: teal;
}<div class="container">
<div class="content original">
Content 1
</div>
<div class="content next">
New content
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/420853.html
標籤：
下一篇：間距占位符