jQuery:移除变换后读取CSS属性时出现错误值

我正在做一个使用CSS3过渡和动画的项目，有时我需要确保测量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>

这是测试用例。要验证您是否已经解决了我的问题，您必须:

打开devtools控制台。
点击show/hide按钮(过渡比例向下窗口)
再次点击show/hide，在控制台检查。

如果你读取相同的值在所有的点击(即使在过渡之间)，你看到的窗口重新定位在相同的地方每次，你已经修复了我的属性读取问题

供将来参考。

我在jQuery bugtracker上看到，该库在测量css转换元素时存在一些bug(在这里，在这里，等等)。

为了获得一致的结果，我选择使用广泛支持的window.getComputedStyle()，正如您在caniuse.com上看到的那样。这样我还可以避免清除和恢复CSS转换

相关内容

最新更新

热门标签：