JS控制两个元素样式的切换

一个放大镜，一个叉叉，默认叉叉不出现（透明度0），点击按钮，出现叉叉，放大镜透明度变成0.
还要把pointer-events设置成none，还要做一个动画效果。

HTML部分：

<a class="nav-btn-container" href="#">
    <img class="search-btn" src="images/search-icon.svg" >
    <img class="close-btn" src="images/close-icon.svg" >
</a>

CSS部分：

.nav-btn-container {
    display: flex;
    position: relative;
}

.nav-btn-container img {
    position: absolute;
}

.nav-btn-container .close-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
    transition: 300ms;
}

.nav-btn-container .search-btn {
    pointer-events: auto;
    transition: 300ms;
}

.nav-btn-container.active .search-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
}

.nav-btn-container.active .close-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

JS部分：

const navBtnContainer = document.querySelector(".nav-btn-container")
const closeBtn = document.querySelector(".close-btn")
const searchBtn = document.querySelector(".search-btn")

searchBtn.addEventListener("click", () => {
    searchBox.classList.add("active")
    navBtnContainer.classList.add("active")
})

closeBtn.addEventListener("click", () => {
    searchBox.classList.remove("active")
    navBtnContainer.classList.remove("active")
})