javascript - jQuery 缩放 div 到父级

Question

我很难过，我已经编写了一些代码来在一个 div 中缩放一个 div。出于这个问题的目的，我已将代码断章取义以显示工作版本。

基本上是在加载时，如果用户调整浏览器的大小，div 会动态缩放，因此它会按比例适合容器 div。

一切正常。我有一个 dropdown select 使用户能够更改较小的 div 的大小。它使用 .removeClass 和 .addClass。然后调用 scale 函数，但是只有当 scale 函数被定时器延迟时它才会起作用，即;

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
setTimeout(function(){ 
  scalePages();
}, 1000);

这行不通；

$("#pageSize").removeClass();
$("#pageSize").addClass($("#paper").val());
scalePages();

我很困惑为什么它需要一个计时器。我试图将它放在回调函数中，但仍然有效。有人对此有更好的解决方案吗？

 scalePages();
      
//using underscore to delay resize method till finished resizing window
$(window).resize(_.debounce(function () {
  scalePages();
}, 0));

function scalePages() {                    
  var scaleX = $('.content-article').width() / ($("."+$('#pageSize').attr('class')).width());
  var scaleY = $('.content-article').height() / ($("."+$('#pageSize').attr('class')).height());
  var scale = (scaleX > scaleY) ? scaleY : scaleX; 
  var newLeftPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).width()) * scale) - $('.content-article').width())/2));
  var newTopPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).height()) * scale) - $('.content-article').height())/2));
  $('#pageSize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newLeftPos + 'px;top:' + newTopPos + 'px;');
}
       
$("#paper").change(function() {
  $("#pageSize").removeClass();
  $("#pageSize").addClass($("#paper").val());
  setTimeout(function(){ 
    scalePages();
  }, 1000);
});

article {
  height: 250px;
  width: 500px;
  display: flex;
  background: yellow;
  position: relative;
}

#paper {
  float: right;
}

page {
  background: black;
  display: block;
  margin: 0 auto;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  -webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;
  position: absolute;
}
            
.large {width: 5000px;height: 8000px;}
.small {height: 95px;width: 41px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<select id="paper">
  <option value="large">large</option>
  <option value="small">small</option> 
</select>                 
                
<article class="content-article">
  <page id="pageSize" class="large">
    <div id="map"></div>
  </page>
</article>

Answer 1

我会回答我自己的问题，感谢您的帮助。我发现了需要计时器的原因。这是 CSS 转换! (持续 500ms)

我注释掉了这些行；

-webkit-transition: all 500ms ease-in-out !important;
transition: all 500ms ease-in-out !important;

然后取出计时器，它运行得非常棒!无论如何，最终结果在没有转换的情况下看起来更好，因为转换现在是即时的。

完整示例如下...

scalePages();
      
//using underscore to delay resize method till finished resizing window
$(window).resize(_.debounce(function () {
  scalePages();
}, 0));

function scalePages() {                    
  var scaleX = $('.content-article').width() / ($("."+$('#pageSize').attr('class')).width());
  var scaleY = $('.content-article').height() / ($("."+$('#pageSize').attr('class')).height());
  var scale = (scaleX > scaleY) ? scaleY : scaleX; 
  var newLeftPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).width()) * scale) - $('.content-article').width())/2));
  var newTopPos = Math.abs(Math.floor(((($("."+$('#pageSize').attr('class')).height()) * scale) - $('.content-article').height())/2));
  $('#pageSize').attr('style', '-webkit-transform:scale(' + scale + ');left:' + newLeftPos + 'px;top:' + newTopPos + 'px;');
}
       
$("#paper").change(function() {
  $("#pageSize").removeClass();
  $("#pageSize").addClass($("#paper").val());
  //setTimeout(function(){ 
    scalePages();
  //}, 1000);
});

article {
  height: 250px;
  width: 500px;
  display: flex;
  background: yellow;
  position: relative;
}

#paper {
  float: right;
}

page {
  background: black;
  display: block;
  margin: 0 auto;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
  /*-webkit-transition: all 500ms ease-in-out !important;
  transition: all 500ms ease-in-out !important;*/
  position: absolute;
}
            
.large {width: 5000px;height: 8000px;}
.small {height: 95px;width: 41px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>

<select id="paper">
  <option value="large">large</option>
  <option value="small">small</option> 
</select>                 
                
<article class="content-article">
  <page id="pageSize" class="large">
    <div id="map"></div>
  </page>
</article>