html - 删除类时反转CSS过渡

我试图让CSS转换以特定的顺序工作。
步骤1）单击（添加类）时，我希望元素水平展开，然后垂直展开
步骤2）在下一次单击（删除类）时，我希望它反转过程（垂直折叠，然后水平折叠）。
我已经完成了第一步。我交错了transition属性中的值，它工作得很好。为了反转它，我在this website使用了这个代码块中描述的技术（在“让它反转”下）。但是，当单击（并删除“cover all--active”类）时，转换不会按预期的相反顺序进行。此外，将转换属性应用于活动状态将中断步骤1的转换。
请参考我的代码笔，看看我在说什么：http://codepen.io/usern4me/pen/YNRKqr
我的HTML：

<div class="cover-all"></div>

我的CSS：

.cover-all {
    background-color: blue;
    border-radius: 50px;
    color: white;
    cursor: pointer;
    height: 28px;
    overflow: hidden;
    right: 20px;
    top: 29px;
    transition:
        border-radius 0.75s,
        width 0.75s,
        right 0.75s,
        height 0.75s 0.75s,
        top 0.75s 0.75s;
    width: 70px;
}

.cover-all.cover-all--active {
    top: 0;
    right: 0;
    height: 420px;
    width: 100%;
    border-radius: 0;
    /*  transition: height 0.75s, top 0.75s, border-radius 0.75s 0.75s, width 0.75s 0.75s, right 0.75s 0.75s; */
}

活动状态转换当前已被注释掉，因此，与上面所述一样，当第一次单击元素（并应用类）但单击以删除类不会反转转换时，转换就是我所希望的那样。如果取消注释“cover all--active”类转换，则两个转换都无法正常工作。
在我对着电脑大喊大叫之前，请帮帮我。
非常感谢！!

最佳答案

你需要交换转换。
这是我用类似的解释回答的。
在您的具体案例中，发生了以下情况：
应用于选择器.cover-all的转换是在移除类.cover-all--active时触发的第二个转换。如您所料，它不是第一个转换的原因是，来自另一个选择器的转换将重写此选择器声明的转换。
同样，应用于选择器.cover-all.cover-all--active的转换是添加类.cover-all--active时触发的第一个转换。这是因为从选择器.cover-all.cover-all--active的转换会覆盖上一个转换，这意味着它是第一个转换。
a related question

.cover-all {
  /* ... other styles ... */

  /*
    This is the second transition that is triggered.
    It will occur when the class ".cover-all--active" is removed.
  */
  transition:
    border-radius 0.75s 0.75s,
    width 0.75s 0.75s,
    right 0.75s 0.75s,
    height 0.75s,
    top 0.75s;
}

.cover-all.cover-all--active {
  /* ... other styles ... */

  /*
    This is the first transition that is triggered.
    It will occur when the class ".cover-all--active" is added.
  */
  transition:
    border-radius 0.75s,
    width 0.75s,
    right 0.75s,
    height 0.75s 0.75s,
    top 0.75s 0.75s;
}

您还可以简化jQuery，因为this引用了.cover-all元素：

$('.cover-all').on('click', function() {
  $(this).toggleClass('cover-all--active');
});

完整代码段：

$('.cover-all').on('click', function() {
  $(this).toggleClass('cover-all--active');
});

.cover-all {
  background-color: red;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  height: 28px;
  overflow: hidden;
  right: 20px;
  top: 29px;
  width: 70px;
  transition: border-radius 0.75s 0.75s, width 0.75s 0.75s, right 0.75s 0.75s, height 0.75s, top 0.75s;
}
.cover-all.cover-all--active {
  top: 0;
  right: 0;
  height: 420px;
  width: 100%;
  border-radius: 0;
  transition: border-radius 0.75s, width 0.75s, right 0.75s, height 0.75s 0.75s, top 0.75s 0.75s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cover-all"></div>

关于html - 删除类时反转CSS过渡，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42150976/