javascript - 有没有办法在中途暂停 CSS 过渡？

Question

其实这个题目很能说明问题。但要澄清一下，我对几件事感到好奇：

1. 有没有办法——不是禁用——而是暂停属性转换？（然后 - 恢复它，也许）。

2. 有没有办法在转换时读取属性更改（通过 JavaScript）？例如，$(el).height()悬停事件后 0.5 秒后将返回 50，如果 el 的样式是：el { height: 100px; transition: height 1s; }和el:hover { height: 0px; }（这是一个草图，请原谅我的语法）。

Answer 1

1）您可以使用animation-play-stateCSS 属性，并在

animation-play-state:running和animation-play-state:paused https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

2）简短的回答是肯定的。无论您在转换过程中读取的哪个属性（比如说height），都将在查询时返回当前值。