我有两个 div 相互重叠。一个淡出，一个淡入。如何用javascript(或jquery)获取opacity的目标值，知道哪个淡入哪个淡出？
演示 fiddle :http://jsfiddle.net/ppEc3/
我想做的是获取淡入的 div 的高度，然后将红色 div 的高度设置为此高度。
fiddle 代码:
<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>
最佳答案
如果您通过设置 .style.opacity 切换不透明度，那么您可以通过阅读 .style.opacity 找到目标值，即使它是在转换期间。我还没有测试过它，但如果你在类里面应用不透明度变化，它应该以同样的方式工作，我认为，其他人需要确认这一点。
如果您使用 getComputedStyle，您将获得实际过渡点的不透明度。
关于javascript - 正在进行的CSS3 Transition，如何获取目标值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22238749/