在JavaScript过渡期间获取当前CSS属性值 [英] Get current CSS property value during a transition in JavaScript

问题描述

我希望能够在完全执行之前在转换过程中读取CSS属性的值。那可能吗？因此，如果在从0％到100％的过渡期间，我要检查一半，我能看到它的50％吗？

解决方案

< blockquote>

在JavaScript过渡期间是否可以获取当前的css属性？

是

  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：高度10s; -webkit-transition：身高10s;宽度：100px;身高：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过渡期间，em>不会向DOM报告样式的变化。

I would like to be able to read the value of a CSS property in the middle of a transition before it is fully executed. Is that possible? So if during a transition from 0% to 100%, I were to check halfway through, could I see it at 50%?

解决方案

Is it possible to get the current css property during a transition in JavaScript?

Yes

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>

So far I've only tested firefox & chrome, but it appears that you can get the current CSS height via JS.

I can't think of a reason why the browser wouldn't report the change in styles to the DOM during a CSS transition.

这篇关于在JavaScript过渡期间获取当前CSS属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！