Javascript 使用display:flex设置菜单动画；

我想使用带有JavaScript（jQuery或vanilla）的

display:flex

为菜单设置动画。这不起作用：

$（'#blah'）。单击（函数（e）{
e、 预防默认值（）；
$（'mid'）.animate（{flex:'020%}）；
返回false；
});
*{margin:0；padding:0；}
#菜单{背景色：黄色；显示：flex；}
#左{背景色：绿色；flex:0 200px；}
#中间{背景色：红色；弹性：0 40%；}
#右{背景色：蓝色；弹性：1；}

左绿色：200px
中红色：浏览器宽度的40%
右图蓝色：休息
在
animate
功能中使用
flexBasis
，而不是
flex


$（'#blah'）。单击（函数（e）{
e、 预防默认值（）；
$（'mid'）.animate（{flexBasis:'20%}）；
返回false；
});
*{margin:0；padding:0；}
#菜单{背景色：黄色；显示：flex；}
#左{背景色：绿色；flex:0 200px；}
#中间{背景色：红色；弹性：0 40%；}
#右{背景色：蓝色；弹性：1；}

左绿色：200px
中红色：浏览器宽度的40%
右图蓝色：休息
在
animate
功能中使用
flexBasis
，而不是
flex


$（'#blah'）。单击（函数（e）{
e、 预防默认值（）；
$（'mid'）.animate（{flexBasis:'20%}）；
返回false；
});
*{margin:0；padding:0；}
#菜单{背景色：黄色；显示：flex；}
#左{背景色：绿色；flex:0 200px；}
#中间{背景色：红色；弹性：0 40%；}
#右{背景色：蓝色；弹性：1；}

左绿色：200px
中红色：浏览器宽度的40%
右图蓝色：休息
像这样的东西对你有用吗


$（'#blah'）。单击（函数（e）{
e、 预防默认值（）；
$（'mid'）.css（'flex'，'020%）；
返回false；
});
*{margin:0；padding:0；}
#菜单{背景色：黄色；显示：flex；}
#左{背景色：绿色；flex:0 200px；}
#中间{背景色：红色；弹性：0.40%；过渡：所有0.35秒缓进缓出}
#右{背景色：蓝色；弹性：1；}

左绿色：200px
中红色：浏览器宽度的40%
右图蓝色：休息
像这样的东西对你有用吗


$（'#blah'）。单击（函数（e）{
e、 预防默认值（）；
$（'mid'）.css（'flex'，'020%）；
返回false；
});
*{margin:0；padding:0；}
#菜单{背景色：黄色；显示：flex；}
#左{背景色：绿色；flex:0 200px；}
#中间{背景色：红色；弹性：0.40%；过渡：所有0.35秒缓进缓出}
#右{背景色：蓝色；弹性：1；}

左绿色：200px
中红色：浏览器宽度的40%
右图蓝色：休息
不抱歉，我们的目标是“动画化”。只需在css类中添加一个转换，它就能完成您需要的任务。我已经把它添加到上面的代码片段中了。不，对不起，这里的目标是“动画化”。只需向css类添加一个转换，它就会完成您需要的任务。我已将其添加到上面的代码片段中