Question

我在侧边栏的顶部带有徽标。侧栏旁边是一个按钮，用于在侧栏的普通类和紧凑类之间切换。这会更改边栏的宽度，因此我添加了0.25s transition-duration，因此它具有很好的打开和关闭动画效果。按下按钮还会更改徽标的来源。我想做的是，当我第一次单击按钮（在普通视图中）时，它会立即更改图像，但是当我第二次单击（在紧凑视图中）时，图像上有一个0.25s transition-delay，因此仅在侧边栏完成打开后更改。有什么办法可以做到这一点？

Answer 1

您愿意使用jQuery（还是普通的Javascript）吗？

（伪代码/未经测试）

在CSS中：

.sidebar-logo.delay-transition {
    transition-delay: 0.25s;
 }

在脚本中

$('.my-special-button').on('click', function() {
    $('.sidebar-logo').addClass('delay-transition');
})

因此，当您第一次单击按钮时，它会添加一个类以使边栏延迟。对于随后的每次点击，它将继续保持这种状态。

Answer 2

sidebar {
  background: red;
  transition: background 1s;
}

sidebar.active {
  background: pink;
  transition: none;
}

工作示例：http://jsfiddle.net/ohbvyLg1/

单向过渡延迟

2 个答案: