Переключение React между вкладками не могло иметь эффектов постепенного исчезновения. ⇐ CSS

[Anonymous]

const [selectedTab, setSelectedTab] = useState("all")

• setSelectedTab("all")}> All Products
• setSelectedTab("smartphones")}> Smartphones
• setSelectedTab("laptop")}> Laptop
• setSelectedTab("headphone")}> Headphone

... ... ... ... style.css

.tab-pane{ display: none; transition: 0.2s; } .tab-pane.fade{ opacity: 0; visibility: hidden; } .tab-pane.fade.active.show{ display: block; visibility: visible; opacity: 1; } In this project, I am trying to switch between the tabs to display the corresponding content without redundant spaces. For CSS, I used some transition effects with opacity and display properties but when I am not using display properties, the content will all put along to the bottom area so how to have the content only be shown when chosen the corresponding tab with fade in out effects?

I am using transition effects by following the examples from the Internet but may want to look for good solutions


Источник: https://stackoverflow.com/questions/781 ... ut-effects