移除在javascript中触发效果的类时，scss关键帧动画出现问题

这是我的问题

我构建了一个div（.header），如果你在header部分后向下滚动，它将设置动画，并将其位置从initial更改为fix，并将其自身转换为柔和向下滚动并显示，但是如果你向上滚动并返回到header部分，它将消失

到目前为止还不错，唯一的问题是，当它消失时，它将在没有动画的情况下完成，并且我无法将动画添加到CSS属性转换中。事实上，我尝试了不同的解决方案，到目前为止没有一个有效

这是我的密码

const header=document.querySelector（'.header'）；
const sticky=document.querySelector（'header'）。offsetHeight；
$（窗口）。滚动（函数（）{
如果（window.pageYOffset>sticky）{
header.classList.add（'onscroll'）；
}否则{
header.classList.remove（'onscroll'）；
}
})

.header{
位置：初始；
&昂斯克罗尔先生{
位置：固定；
左：15px；
右：15px；
顶部：32px；
背景：黑色；
z指数：3；
动画：向前滚动1s；
}
@关键帧平滑滚动{
0% {
转换：translateY（-110px）；
}
100% {
变换：translateY（0px）；
}
}
}
标题{
溢出：隐藏；
高度：95vh；
背景：$cblue；
}

这个元素里面有很多东西
我的技能
移动优先方法

这是否回答了您的问题？问题是，我没有使用转换，而是使用动画，我不确定我要做的是否可以实现。请将动画添加到基类

。header

，这样，当删除滚动类时，它将动画恢复到原始类。您可能还需要将其从“向前”更改。