CSS不播放退出动画-ReactJS和CSSModules

Question

我正在使用带有CSS模块的ReactJS。基本上，我单击一个按钮，然后隐藏的边框将变为较大的边框，以使框的动画逼近某个点。当我单击按钮以触发className更改时，动画（输入动画）很好，但是当我再次单击它以触发另一个className更改时，动画不会播放。苏哈哈

嗨，这是代码：

<a class="logo" href="#">
	<img src="https://svgur.com/i/8H0.svg" />
</a>
<a class="logo" href="#">
	<img src="https://svgur.com/i/8Ex.svg" />
</a>

}

.NavPage {
box-sizing: border-box;
position: fixed;
background: white;
border: red 50px solid;
width: 100vw;
height: 100vh;
top: -100%;
opacity: 0;
z-index: 1;
transition: all 400ms;
pointer-events: none;

}

此处是反应代码：

.NavPageOpen {
position: fixed;
box-sizing: border-box;
border: red 300px solid;
background: none;
width: 100vw;
height: 100vh;
transition: all 400ms ;
pointer-events: all;
z-index: 1;
opacity: 1;