我使用了关键帧，因为过渡不会影响显示属性，但现在它不会很好地淡出

Question

我使用keyframes 在显示元素时应用动画（淡入淡出）。因为transition 不会影响display 属性。这正是我的意思（Why Transition properties do not work with display properties? - GeeksforGeeks)

但是现在我有另一个问题，元素淡入很好，但它没有很好地淡出（当我在按钮出现后向上滚动时它不会淡出。）这就是我的意思（运行代码.)

谢谢。

// BTT icon show
const bttDisplay = () => {
    const backToTop = document.querySelector('.backToTop');
    const windowHeight = window.pageYOffset;

    if (windowHeight >= 500) {
        backToTop.style.bottom = '40px';
        backToTop.style.opacity = 1;
        backToTop.style.display = 'grid';
        backToTop.style.alignContent = 'center';
        backToTop.style.justifyItems = 'center';
    } else if (windowHeight <= 499) {
        backToTop.style.bottom = 0;
        backToTop.style.opacity = 0;
        backToTop.style.display = 'none';
    };
};

window.addEventListener('scroll', bttDisplay);

// Scroll back to top
const goUp = () => {
    document.documentElement.scrollTop = 0;
};

document.querySelector('.backToTop').addEventListener('click', goUp)

@keyframes hover {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.bg {
    display: grid;
    justify-items: center;
    align-content: center;
    width: 100%;
    height: 100vh;
    color: rgb(88, 102, 116);
    font-weight: 600;
    font-size: 30px;
}

.bg1 {
    background-color: #ECB0F5;
}

.bg2 {
    background-color: #9EBFFF;
}

.bg3 {
    background-color: #54E694;
}

.bg4 {
    background-color: #FFFECC;
}

.bg5 {
    background-color: #F2DDC7;
}

.backToTop {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 0;
    right: 25px;
    display: none;
    background-color: whitesmoke;
    font-size: 20px;
    border-radius: 50%;
    opacity: 0;
    cursor: pointer;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    animation: hover 300ms;
}

<section class="bg bg1">scroll</section>
<section class="bg bg2">down</section>
<section class="bg bg3">until to be</section>
<section class="bg bg4">able to</section>
<section class="bg bg5">return top</section>

<span class="backToTop">Top</span>

Answer 1

您使用错误的 CSS 动画。默认情况下，动画只播放一次，您可以使用 animation-play-state 属性手动控制它们何时播放。此外，您实际上并不需要动画。一个简单的 CSS 过渡效果很好。

试试这个代码。

// BTT icon show
const bttDisplay = () => {
    const backToTop = document.querySelector('.backToTop');
    const windowHeight = window.pageYOffset;
  
    if (windowHeight >= 500) {
        backToTop.style.bottom = '40px';
        backToTop.style.alignContent = 'center';
        backToTop.style.justifyItems = 'center';
        backToTop.style.display = 'grid';
        backToTop.style.opacity = "1";
    } else if (windowHeight <= 499) {
        backToTop.style.opacity = "0";
    };
};

window.addEventListener('scroll', bttDisplay);

// Scroll back to top
const goUp = () => {
    document.documentElement.scrollTop = 0;
};

document.querySelector('.backToTop').addEventListener('click', goUp)

.bg {
    display: grid;
    justify-items: center;
    align-content: center;
    width: 100%;
    height: 100vh;
    color: rgb(88, 102, 116);
    font-weight: 600;
    font-size: 30px;
}

.bg1 {
    background-color: #ECB0F5;
}

.bg2 {
    background-color: #9EBFFF;
}

.bg3 {
    background-color: #54E694;
}

.bg4 {
    background-color: #FFFECC;
}

.bg5 {
    background-color: #F2DDC7;
}

.backToTop {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 0;
    right: 25px;
    display: none;
    background-color: whitesmoke;
    font-size: 20px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

<section class="bg bg1">scroll</section>
<section class="bg bg2">down</section>
<section class="bg bg3">until to be</section>
<section class="bg bg4">able to</section>
<section class="bg bg5">return top</section>

<span class="backToTop">Top</span>