单向转换延迟

Question

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

Answer 1

sidebar {
background: red;
transition: background 1s;
}
sidebar.active {
background: pink;
transition: none;
}

<div>click</div>
<sidebar>
lorem ipsum
</sidebar>

Answer 2

你愿意使用jQuery(或vanilla Javascript，就此而言(吗？

(伪代码/未经测试(

在 CSS 中：

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

在脚本中：

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

因此，只要您第一次单击该按钮，它就会添加一个类以使侧边栏延迟。 对于每次后续点击，它将继续以这种方式运行。