CSS3正在進行中的轉換，如何獲得目標值？

我有超過對方兩個div。一個是淡出和一個衰落中如何使用JavaScript（或jQuery的），以獲得不透明的目標價值，知道哪一個是衰落和被淡出？CSS3正在進行中的轉換，如何獲得目標值？

什麼即時試圖做的就是正在衰落的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>

來源

2014-03-06 Blargh

發佈一些代碼，請你嘗試過？ – Jatin

，你不是一個衰落的這些元素，你不應該知道你在做什麼？ – adeneo

你必須搜索CSS和JS它 –

如果你通過即使其轉變過程中讀取.style.opacity通過設置.style.opacity然後你可以找到目標值切換不透明度。我還沒有測試過它，但如果你通過課程應用不透明度改變，它應該以同樣的方式工作，我想其他人需要確認這一點。

如果使用 getComputedStyle你會在過渡點實際獲得的不透明度

。

來源

2014-04-08 08:36:52 Noitidart

CSS3正在進行中的轉換，如何獲得目標值？

回答

相關問題