上一次转换完成后应用额外的CSS属性

Question

点击按钮后，我有一个侧边栏可以获得课程.closed。

将宽度设置为零的动画效果非常好。问题是，我在侧边栏的左侧有一个边框，当宽度设置为零时，它看起来是双厚的，因为它与另一边的边框相遇。因此，在转换设置width: 0之后，我还需要设置border: none。

这就是我在SCSS中所拥有的。 （如果您不知道，&.closed与#sidebar.closed相同。）

#sidebar {
  border-left: solid $border-width $border-color;
  white-space: nowrap;
  overflow-x: hidden;
  width: $sidebar-width;
  transition: width $sidebar-animation;
  transition: border $sidebar-animation $sidebar-animation;
  // Here I tried to set the delay for border.

  &.closed {
    width: 0;
    border: none;
  }
}

那不行。那我该怎么做呢？

Answer 1

正如圣地亚哥指出的那样，你无法过渡速记与边界的关系。属性。但是你可以转换边框宽度和边框颜色。

您可以尝试将边框转换为与背景相同的颜色而不是无。您也可以将边框的宽度转换为0。

我稍微调整了你的示例，以便快速而肮脏地使用to to to to to to to to to to to。

＆＃13;

＆＃13;

$('button').click(function() {
  $('#sidebar').toggleClass("closed");
});

＆＃13;

#sidebar {
  border-left-style: solid;
  border-left-color: black;
  border-left-width: 10px;
  white-space: nowrap;
  overflow-x: hidden;
  width: 300px;
  transition: all .25s;
  /* added for demo */
  background: purple;
}

#sidebar.closed {
  width: 0px;
  border-left-color: white;
  border-left-width: 0;
  border-left-style: solid;
  transition: all .25s;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sidebar">
<p>Sidebar</p>
</div>

<button>Close sidebar</button>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为边框不是有效的过渡属性

https://www.w3.org/TR/css3-transitions/#transition-shorthand-property

图像的答案是过渡border-left-width到0