显示过渡在 CSS 和反应上不起作用.js

Question

.cartBtn {
appearance: none;
outline: none;
border: none;
cursor: pointer;
text-align: center;
background-color: transparent;
color: inherit;
}
.cartBtn:hover {
color: black;
}
.cart {
display: none;
opacity: 0;
transition: all 4s ease-in-out;
}
.cart-toggle:hover .cart {
display: block;
opacity: 1;
}
.cart-toggle {
position: relative;
}

<button className={styled.cartBtn}>
<h3>Cart</h3>
<div className={styled.cart}>
<Cart />
</div>
</button>
</div>

我有一个按钮在我的导航，当我悬停它，我希望这个购物车显示。购物车是一个包含一些物品的盒子，被写成绝对位置。在文本和可切换的框之间有一个空格，当我试图将鼠标悬停在框上时，我甚至够不到它。所以如果我可以添加一个过渡，我可以到达但是问题是我的过渡不起作用。

Answer 1

没有动画显示。我通过设置超时来处理这个问题，但是有专门针对这些的特定包，比如cstransition。这是cstransition文档的链接:https://reactcommunity.org/react-transition-group/css-transition