Переключение 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 be put along to the bottom area so how can the content only be shown when the corresponding tab fades 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