如何在同时使用 width 和 max-width 时反转 CSS 动画

Question

我想反转使用“宽度”和“最大宽度”组合的 CSS 动画。

目前，此 fiddle 中显示的动画会在单击“切换”时正确展开，但它只是“快速”回到原始宽度，然后再次单击切换按钮。

如何return顺利恢复到原来的状态？

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>

Answer 1

将转换属性放在边栏 class。
仅设置一次转换属性（用逗号分隔顺序）。否则第二个顺序将覆盖第一个顺序。

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>

如何在同时使用 width 和 max-width 时反转 CSS 动画

How to reverse CSS animation when using both width and max-width

javascript

css

css-transitions

css-animations