我希望能够在过渡完全执行之前在过渡过程中读取 CSS 属性的值。那可能吗?因此,如果在从 0% 到 100% 的过渡期间,我要在中途检查,是否可以在 50% 时看到它?
最佳答案
Is it possible to get the current css property during a transition in JavaScript?
是
var timer;
function test(e) {
var $this;
$this = $(this);
timer = setInterval(function () {
console.log($this.height());
}, 500);
}
function untest(e) {
clearInterval(timer);
}
$('div').mouseenter(test).mouseleave(untest);
div
{
transition: height 10s;
-moz-transition: height 10s;
-webkit-transition: height 10s;
width: 100px;
height: 100px;
background-color: #00F;
}
div:hover
{
height: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
到目前为止,我只测试了 firefox 和 chrome,但看起来您可以通过 JS 获取当前的 CSS 高度。
我想不出为什么浏览器不会在 CSS 转换期间向 DOM 报告样式更改的原因。
关于javascript - 在 JavaScript 转换期间获取当前 CSS 属性值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8920934/