在Javascript过渡期间是否可以获得当前的css属性？ [英] Is it possible to get the current css property during a transition in Javascript?

问题描述

我希望能够在转换完成之前读取css属性的值。那可能吗？因此，如果在从0％到100％的过渡期间，我将检查中途，我可以看到它在50％吗？

解决方案

block是什么意思？

是否可以在JavaScript转换过程中获取当前css属性？

h2>

  var timer; function test（e）{var $ this; $ this = $（this）; timer = setInterval（function（）{console.log（$ this.height（））;}，500）;} function untest（e）{clearInterval（timer）;} $（'div'）。 mouseleave（untest）;  

  div {transition：height 10s; -moz-transition：height 10s; -webkit-过渡：高度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报告样式的更改。

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屋！