Question

我试图动态设置四个div的位置和大小。使用position:relative;设置CSS中的顶部和左侧或display: inline-block将不适用于我的情况。如果没有这样做的话，我还有其他元素会变得偏斜而不正常。我拥有它以便将所有东西都设置在正确的位置，但是从一个位置到另一个位置以及从一个宽度到另一个位置的过渡并不像我想的那样顺利发生。我不希望它像现在一样以步骤发生，我需要它一下子发生，不幸的是我需要setTimeout函数才能正常工作，但这就是导致延迟的原因。如果有人在点击按钮时可以帮助我获得一个非常好的过渡，（立即和所有的一次）我会非常感激。

JSFiddle

HTML：

<div>
  <button id='button'>
    Click here
  </button>
</div>
<div class="container">
  <div class="box">
    <label class="label">Title</label>
    <label class="percentage">93%</label>
    <label class="difference">3%</label>
    <label class="more">...</label>
  </div>
  <div class="box">
    <label class="label">Title</label>
    <label class="percentage">96%</label>
    <label class="difference">3%</label>
    <label class="more">...</label>
  </div>
  <div class="box">
    <label class="label">Title</label>
    <label class="percentage">91%</label>
    <label class="difference">1%</label>
    <label class="more">...</label>
  </div>
  <div class="box">
    <label class="label">Title</label>
    <label class="percentage">92%</label>
    <label class="difference">5%</label>
    <label class="more">...</label>
  </div>
</div>

JS

  setSizes();
  setPosition();

  $('#button').click(function() {
    if ($('.container').hasClass('active')) {
      $('.container').removeClass('active');
    } else {
      $('.container').addClass('active');
    }

    setSizes();
    setPosition();
  });

  function setSizes() {
    setTimeout(function() {
      setBoxSizes();
    }, 250);
  }

  function setBoxSizes() {
    var box = $('.box'),
      difference = $('.difference'),
      percentage = $('.percentage'),
      more = $('.more');

    for (i = 0; i < box.length; i++) {
      $(box[i]).animate({
        width: (($('.container').width() - 118) / box.length) + 'px'
      }, 300);
      $(difference[i]).animate({
        left: (((($('.container').width()) / box.length) - (($(difference[i]).width() + $(percentage[i]).width())) + 55) - 105) + 'px'
      }, 300);
      $(more[i]).animate({
        left: (((($('.container').width()) / box.length) - (($(difference[i]).width() + $(percentage[i]).width())) + 20) - 105) + 'px'
      }, 300);
    }
  }

  function setPosition() {
    setTimeout(function() {
      setBoxPosition();
    }, 1000);
  }

  function setBoxPosition() {
    var box = $('.box'),
      top = 0,
      left = 0;

    for (i = 0; i < box.length; i++) {
      $(box[i]).animate({
        opacity: 1
      }, 200);
      $(box[i]).css('top', top + 'px');
      $(box[i]).css('left', left + 'px');

      top -= 120;
      left += ($(box[i]).width() + 22);
    }
  }

CSS

 .box {
  width: 414px;
  height: 100px;
  background-color: #fff;
  margin: 20px 0px 20px 20px;
  box-shadow: 0px 6px 6px -6px #888;
  position: relative;
  opacity: 0;
  transition: all .3s ease;
  z-index: 1000;
}

.label {
  display: block;
  font-size: 18px;
  padding: 10px 20px;
}

.percentage {
  padding: 10px 20px;
  font-size: 36px;
  font-weight: 700;
}

.difference {
  position: relative;
  left: 260px;
  top: 3px;
  padding: 10px;
}

.difference::after {
  content: '\25b2';
  position: absolute;
  left: -15px;
  top: 8px;
  font-size: 18px;
}

.more {
  font-size: 28px;
  position: relative;
  top: -55px;
  left: 230px;
  cursor: pointer;
  font-family: Segoe UI;
}

.container {
  width: 1800px;
}

.container.active {
  width: 1200px;
}

Answer 1

使用top＆amp;左边定位块元素，混合JQuery和HTML5动画...... geez。我想看到你的网页，了解为什么你的布局是这样的，而不是内联块，而只是改变百分比宽度或flexbox。

这里的主要问题是行

 function _onGeometryLoaded( event ) {
   if( urns.length <= 0 ) {
       viewer.removeEventListener(
         Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
         _onGeometryLoaded
       );
       return;
   }

   viewer.loadModel( urns[0], { globalOffset: event.model.getData().globalOffset } );
   urns.splice( 0, 1 );
 }

 viewer.addEventListener(
   Autodesk.Viewing.GEOMETRY_LOADED_EVENT,
   _onGeometryLoaded
 );

 // Change here
 viewer.start( urns[0], options, onSuccessCallback, onErrorCallback );
 urns.splice( 0, 1 );

取决于之前完成的JQuery动画，因为它取决于最终的宽度。这意味着您无法使用您想要的方法进行即时切换。您必须通过在前一个函数中计算它来对该值进行硬编码，并且知道宽度动画需要300毫秒的时间。

另外你应该将你的CSS更改为

 left += ($(box[i]).width() + 22);

导致你的宽度变化因此而延迟。

Updated JSFiddle

由于元素之间没有相互作用，看起来仍然有点笨拙。

在JS中动态设置div位置和大小 - 如何使过渡更顺畅？

1 个答案: