除悬停外，如何反向转换CSS延迟？

Question

我有一个vue.js应用程序，我试图在其中找出如何反转延迟的CSS转换。我有一个div，当用户单击关闭按钮时，其宽度会缩小。然后高度收缩。高度上有延迟，因为我要等待宽度缩小后再收缩高度。

之前：

之后：

[当用户单击问号图标时，我希望相反的情况发生。高度应立即扩大，然后宽度在延迟后扩大。

我在Google上找到的所有有关如何执行此操作的示例都与悬停过渡有关。他们说将反向转换放在悬停类中。我看过的所有演示都可以正常工作。但是当涉及到非悬停触发的过渡时，它的工作方式必须有所不同。就我而言，触发器是单击鼠标。而且在线解决方案不起作用。相反，发生的事情是，置于过渡到类中的反向过渡似乎覆盖了原始过渡-这意味着原始过渡首先收缩高度（考虑到内容不合适，这看起来很糟糕），然后收缩宽度。

这是我的代码：

.need-help-container {
    position: absolute;
    right: 0;
    height: 120px;
    ...
    transition: right .5s, height .5s .5s;
}

.need-help-container-closed {
    right: -360px;
    height: 50px;

    transition: right .5s .5s, height .5s; // <-- doesn't work
}

<!-- need help box -->
<div class="need-help-container" :class="{'need-help-container-closed': needHelpClosed}">
...
    <!-- close button -->
    <div ...>
        <v-icon @click="needHelpClosed = true" ...>close</v-icon>
    </div>
</div>

涉及悬停的示例的相同解决方案在这里起作用吗？如果是这样，为什么它对我不起作用？如果没有，那么对我的情况有什么替代解决方案？

谢谢。

Answer 1

尝试一下：

.need-help-container-closed:active {
//your code here from tutorial 
}

使用：使用主动代替悬停。