Question

我有两个div。一个正在消失，一个正在消失。如何使用javascript（或jquery）获取不透明度的目标值，以了解哪个正在淡入，哪个正在消失？

我想要做的是获得淡入的div的高度，然后将红色div高度设置为此高度。

小提琴代码：

<html>
<head>
<style>
    #content {
        position:relative;
        background-color:red;
    }
    .page {
        position: absolute;
        width: 200px;
        background-color: #dfdfdf;
        opacity: 0;
        transition: opacity 1s;
    }

    #radio1:checked ~ .p1 { opacity: 1; }
    #radio2:checked ~ .p2 { opacity: 1; }
</style>

</head>
<body>
<div id="content">
<input type="radio" id="radio1" name="nav" checked="checked" />
<label for="radio1">Page 1</label>
<input type="radio" id="radio2" name="nav" />
<label for="radio2">Page 2</label>

<div class="page p1" style="height:200px;">page 1</div>
<div class="page p2" style="background-color:steelblue;height:100px;">page 2</div>

<script>
    var input = document.querySelectorAll('input');
    [].forEach.call(input,function(el) {
        el.addEventListener('change',function(){
            setTimeout(sizeToContents, 100);
        },false);
    });

    function sizeToContents() {
        var page1 = document.querySelector('.p1');
        var page2 = document.querySelector('.p2');

        var p1Opacity = window.getComputedStyle(page1, null).opacity;
        var p2Opacity = window.getComputedStyle(page2, null).opacity;
        alert("p1Opacity=" + p1Opacity +"\np2Opacity=" + p2Opacity);
        document.querySelector('#content').style.height = document.querySelector('.page[opacity=1]');
    }
</script>
</body>
</html>

Answer 1

如果您通过设置.style.opacity切换不透明度，则可以通过阅读.style.opacity找到目标值，即使它在转换期间也是如此。我还没有对它进行过测试，但是如果你通过课程应用不透明度变化它应该以同样的方式工作，我认为，其他人需要确认这一点。

如果您使用getComputedStyle，您将获得转换中实际点的不透明度。

正在进行的CSS3转换，如何获得目标价值？

1 个答案: