jQuery：変換後にCSSプロパティを読み込んだときに値が正しくない

CSS3のトランジションとアニメーションを使用するプロジェクトで作業していますが、変換が適用されていても変換されていないCSSプロパティの値を測定する必要があります。 I：私は jQuery：変換後にCSSプロパティを読み込んだときに値が正しくない

が必要読み取りプロパティは、私は奇妙な行動を見つけたこれを行う前の変換

を復元

一時的にバックアップして変換

を削除：この私を行うには

正しい値を取得のみデバッガでステップバイステップを進めてください。

私はブラウザのプロパティを読み書きでバッチしていることがわかりました。そのために、変換の設定/復元後にoffsetTopプロパティの読み込みを行いましたが、運がありません。

注：この動作はブラウザ間で一致しているようです。

これは

$(document).ready(function() { 
 
    jQuery.fn.extend({ 
 
    setupIdentity: function() { 
 
     var restore_props = [], 
 
     i; 
 
     for (i = 0; i < this.length; ++i) { 
 
     restore_props.push({ 
 
      "animation-play-state": this[i].style.animationPlayState, 
 
      transform: this[i].style.transform, 
 
      display: this[i].style.display 
 
     }); 
 
     } 
 

 
     var identity_props = { 
 
     "animation-play-state": "paused", 
 
     transform: "none", 
 
     display: "" 
 
     }; 
 
     this.css(identity_props); 
 

 
     for (i = 0; i < this.length; ++i) 
 
     var top = this[i].offsetTop; 
 

 
     return restore_props; 
 
    }, 
 

 
    restoreIdentity: function(restore_props) { 
 
     for (var i = 0; i < this.length; ++i) { 
 
     this.eq(i).css(restore_props[i]); 
 
     var top = this[i].offsetTop; 
 
     } 
 

 
     return this; 
 
    } 
 
    }); 
 

 
    $("#toggle").on("click", function() { 
 
    var wrap = $("#win_wrap"), 
 
     win = $("#win"); 
 
    if (wrap.hasClass("iconized")) { 
 
     var restore = wrap.setupIdentity(); 
 
     var restore2 = win.setupIdentity(); 
 

 
     var win_width = win.width(), 
 
     win_height = win.height(); 
 
     var win_offset = win.offset(); 
 
     console.log(win_width, win_height); 
 
     console.log(win_offset); 
 

 
     win.css(win_offset); 
 

 
     win.restoreIdentity(restore2); 
 
     wrap.restoreIdentity(restore); 
 
    } 
 

 
    wrap.toggleClass("iconized"); 
 
    }); 
 

 
    console.log($("#win").width(), $("#win").height()); 
 
    console.log($("#win").offset()); 
 
});

.window { 
 
    background: #DDD; 
 
    background-size: contain; 
 
    color: #000; 
 
    position: absolute; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.4); 
 
    outline: none; 
 
    z-index: 100; 
 
    box-sizing: border-box; 
 
    border-radius: 0.5em; 
 
    padding: 1em; 
 
    text-align: center; 
 
} 
 
.wwindow.trs-iconizable { 
 
    transition-property: opacity, transform; 
 
    transition-duration: 1s; 
 
    transform-origin: top right; 
 
    opacity: 1.0; 
 
    transform: scale(1.0); 
 
} 
 
.wwindow.trs-iconizable.iconized { 
 
    opacity: 0.0; 
 
    transform: scale(0.0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <button id="toggle">Show/Hide</button> 
 
    <div id="apps_wrapper"> 
 
    <div id="win_wrap" class="wwindow trs-iconizable" style=""> 
 
     <div id="win" class="window" style="position: fixed; left: 40px; top: 40px; min-width: 15em; min-height: 5em; width: auto; height: auto;">text</div> 
 
    </div> 
 
    </div> 
 
</body>

Thisをテストするための最小限のセットアップはテストケースフィドルです。問題を解決したかどうかを確認するには、次の手順を実行する必要があります：

devtoolsコンソールを開きます。
show/hideボタンをクリックしてください（ウィンドウの下にトランジション・スケールが表示されます）
show/hideをもう一度クリックし、コンソールをオンにします。あなたはすべてのクリックで同じ値（でも、移行の間であれば）を読んで、あなたが同じ場所たびに再配置ウィンドウが表示された場合

は、あなたが私の財産の読み取り問題を修正しました。

出典

2016-11-03 Marco Sacchi

私は幅と高さが引っ張られているのは間違っていると思われるものですか？ – Culyx

@Culyxいいえ、間違った読みは 'win.offset（）'ですが、jQueryにはCSSで変換された要素を測定するいくつかのバグがあります。 –

十分に公正で、私が尋ねた理由は、幅/高さがautoの要素は特定の条件でも奇妙な結果をもたらすということです – Culyx

今後の参考にしてください。

私は、ライブラリにCSSで変換された要素（here、hereなど）を測定するいくつかのバグがあることをjQuery bugtrackerで読みました。

一貫した結果を得るために、icanuse.comのように広くサポートされているwindow.getComputedStyle()を使用することを選択しました。このようにして、CSSトランスフォームのクリアと復元を避けることもできます。

出典

2016-11-04 10:35:33

jQuery：変換後にCSSプロパティを読み込んだときに値が正しくない

答えて

関連する問題