我想反转一个CSS动画；宽度"；以及"；最大宽度"；正在使用。
当前，在该小提琴中显示的动画在"打开"时适当地展开；切换"；被点击，但它只是"；快照"；返回到原始宽度，然后再次单击切换按钮。
如何使其顺利恢复到原始状态？
https://jsfiddle.net/darrengates/opradf20/
const toggle = () => {
$('.sidebar').toggleClass('grow');
}.sidebar {
width: 40vw;
max-width: 300px;
background: blue;
height: 200px;
}
.sidebar.grow {
transition: width 500ms ease-in-out;
transition: max-width 500ms ease-in-out;
}
.sidebar.grow {
width: 90vw;
max-width: 90vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<button onClick="toggle()">Toggle Growth</button>
<div class="sidebar"></div>
</html>- 将transition属性放在侧边栏类中
- 只设置一次transition属性(用逗号分隔顺序(。否则，第二个订单将覆盖第一个订单
const toggle = () => {
$('.sidebar').toggleClass('grow');
}.sidebar {
width: 40vw;
max-width: 300px;
background: blue;
height: 200px;
transition: width 500ms ease-in-out, max-width 500ms ease-in-out;
}
.sidebar.grow {
width: 90vw;
max-width: 90vw;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<button onClick="toggle()">Toggle Growth</button>
<div class="sidebar"></div>
</html>