Javascript 如何在同时使用“宽度”和“最大宽度”时反转CSS动画

我想反转一个CSS动画，其中使用了“宽度”和“最大宽度”的组合

当前，当单击“切换”时，此小提琴中显示的动画会正确展开，但它只是“捕捉”到原始宽度，然后再次单击切换按钮

如何使其平稳恢复到原始状态

const toggle=（）=>{
$（'.sidebar'）.toggleClass（'grow'）；
}

。侧栏{
宽度：40vw；
最大宽度：300px；
背景：蓝色；
高度：200px；
}
.sidebar.grow{
过渡：宽度500ms，易于进出；
过渡：最大宽度为500ms，易于进出；
}
.sidebar.grow{
宽度：90vw；
最大宽度：90vw；
}

切换增长

将transition属性放入侧栏类中

仅设置一次转换属性（用逗号分隔顺序）。否则，第二个订单将覆盖第一个订单

const toggle=（）=>{
$（'.sidebar'）.toggleClass（'grow'）；
}

。侧栏{
宽度：40vw；
最大宽度：300px；
背景：蓝色；
高度：200px；
过渡：宽500ms缓进缓出，最大宽500ms缓进缓出；
}
.sidebar.grow{
宽度：90vw；
最大宽度：90vw；
}

切换增长