Question

我正在尝试将CSS转换按特定顺序工作。

步骤1）点击（添加一个类），我希望元素水平扩展然后垂直扩展

步骤2）在下一次单击（删除类）时，我希望它反转过程（垂直折叠然后水平折叠）。

我完成了第1步。我错开了过渡属性中的值，它运行得很好。为了扭转它，我在this website处使用了此代码块中描述的技术（在“Get It to Reverse”下）。但是，当单击（并删除“cover-all-active”类）时，转换的顺序与预期不同。此外，将过渡属性应用于活动状态会中断步骤1的过渡。

请参阅我的Codepen，了解我在说什么：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; */
}

当前注释了活动状态转换，如上所述，转换是我第一次单击元素时所需的转换（并且应用了类）但是单击以删除类不会反转转换。如果您取消注释“全部覆盖 - 活动”类转换，则转换都不能正常工作。

在我的计算机上再尖叫一下之前，请帮助我。

非常感谢!!

Answer 1

您需要交换过渡。

我在a related question回答了类似的解释。

在您的具体案例中，以下是正在发生的事情：

在选择器.cover-all上应用的转换是第二次转换，当移除类.cover-all--active时会触发该转换。正如您所料，它不是第一个转换的原因是因为来自另一个选择器的转换会覆盖此选择器声明的转换。
同样，在选择器.cover-all.cover-all--active上应用的转换是第一次转换，在添加类.cover-all--active时会触发此转换。这是因为从选择器.cover-all.cover-all--active的转换会覆盖先前的转换，这意味着它是第一个转换。

Updated Example

.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');
});

完整的代码段：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在删除类时反转CSS转换

1 个答案: