React项目页面刷新时侧边栏无操作自动滑入滑出如何修复？

问题根因 #

你给默认状态的.likesContainer绑定了animateHide关键帧动画，页面首次加载渲染时，浏览器会自动执行该动画，表现为侧边栏从right:0滑动到right:-328px，也就是你看到的刷新后自动滑入再滑出的异常效果。

最优解决方案（推荐） #

你的场景只是两个状态的切换，不需要使用@keyframes动画，改用CSS transition即可，transition仅会在属性值发生变化时触发过渡效果，首次加载不会自动执行，直接修改CSS文件如下：

.likesContainer {
    position: fixed;
    top: 83px;
    right: -328px;
    width: 320px;
    background-color: rgb(70, 70, 70);
    height:auto; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    z-index: 2;
    box-shadow: 0px 4px 10px black;
    /* 替换原有animation为transition */
    transition: right .5s linear;
}

.likesContainer.show {
    right: 0;
}

可以直接删掉原有的animateHide、animateShow关键帧代码，React组件无需任何修改即可解决刷新闪动画的问题。

备用方案（如果必须保留keyframes动画） #

如果你的业务场景需要保留关键帧动画，可以通过预加载禁用类的方式解决：

1. 在public/index.html的body标签上添加默认类：

<body class="preload">

2. 在全局CSS中添加预加载禁用规则：

body.preload * {
  animation-duration: 0s !important;
}

3. 在项目根组件（比如App.jsx）中添加挂载逻辑，页面加载完成后移除禁用类：

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    document.body.classList.remove('preload');
  }, []);
  // 其余原有逻辑
}

内容的提问来源于stack exchange，提问作者Noud