为右侧固定菜单添加滑入滑出动画效果的实现方案

要实现菜单的平滑滑入滑出，不能直接用display: none/block（这种属性切换不会触发过渡动画），我们可以通过CSS过渡（transition）结合位置偏移来实现，下面是具体修改方案：

核心修改思路 #

1. 用right属性控制菜单位置，初始状态让菜单完全移出右侧视口
2. 给菜单添加transition属性，让位置变化产生平滑过渡效果
3. 通过添加/移除CSS类切换菜单显示状态，替代直接修改display属性

1. 修改CSS样式 #

调整.menu-general的初始状态，添加过渡动画，并新增激活类：

.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

/* 修改菜单初始状态：完全移出右侧视口 */
.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:-370px; /* 宽度350 + 左右padding各10 = 370 */
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
  transition: right 0.3s ease; /* 添加0.3秒的平滑过渡 */
}

/* 菜单激活时：回到视口内 */
.menu-general.active {
  right:0;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}

2. 修改JavaScript逻辑 #

不再直接修改display，改为添加/移除active类：

let menuGeneral = $('#menu-general');

$('#menu-up-control').click(function () {
    menuGeneral.addClass('active');
});

$('#menu-up-control-close').click(function () {
    menuGeneral.removeClass('active');
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
          rel="stylesheet"  type='text/css'>

<a id="menu-up-control" class="menu-up-control">
    <i class="fa fa-bars"></i>
</a>

<div id="menu-general" class="menu-general">
    <div id="menu-up-control-close" class="menu-up-control-close">
        <i class="fa fa-times"></i>
    </div>
    <ul class="menu-main">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</div>

.menu-up-control {
  float:right;
  font-size:26px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 100px 0 0;
}

.menu-up-control-close {
  width:15px;
}

.menu-up-control-close i {
  color:white;
  font-size:40px;
  top:3px;
  position:relative;
  cursor:pointer;
  padding:10px 0px;
  margin:50px 0 0 40px;
}

.menu-general {
  position:fixed;
  width:350px;
  top:0;
  right:-370px;
  bottom:0;
  z-index:9999;
  padding:10px;
  background-color:black;
  transition: right 0.3s ease;
}

.menu-general.active {
  right:0;
}

.menu-main li, .menu-main li a {
  font-size:36px;
  font-weight:700;
}
.menu-main li a {
  font-weight:bold;
  color:white;
  text-decoration:none;
}

let menuGeneral = $('#menu-general');

$('#menu-up-control').click(function () {
    menuGeneral.addClass('active');
});

$('#menu-up-control-close').click(function () {
    menuGeneral.removeClass('active');
});

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