0

我在我的项目中使用了 knockout.js 和 masonry.js。因此，砌体的文档建议我使用reloaditems 方法将 DOM 的更改应用于砌体。在我为我的项目添加悬停过渡效果之前，它运行良好。这是代码。

正如您在按下“加载更多！”后所看到的那样 按钮砌体似乎重新加载两次！

经过一些调试后，我发现“transitionend”事件使 masonry.js 再次重新加载！

谁能给我一个解决问题的提示？

谢谢你

var dataRand = [
  "Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no",
  "Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.",
  "Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.Et qui modo soleat aperiri. Quo at probo labore integre, nam te modo iudicabit. Ea mutat inermis eos, ei usu soleat scripta repudiandae. Nec ea natum semper, cetero admodum eos eu. Placerat percipit reformidans an eam, vis in ridens ornatus efficiendi, elit labitur nam ne. Eum nonumy noster verear et, ex detracto electram eloquentiam mei."
];
function masonryExampleViewModel() {
  var that = this;
  this.results = ko.observableArray([]);
  this.loadmore = function() {
    for (var i = 0; i <= 5; i++) {
      that.results.push(dataRand[Math.floor(Math.random() * 3)]);
    }
    $("#masonryContainer").masonry("reloadItems");
    $("#masonryContainer").masonry("layout");
  };
}
ko.applyBindings(new masonryExampleViewModel(), $("#masonryExampleWrapper")[0]);
$("#masonryContainer").masonry({
  itemSelector: ".masonry-item",
  columnWidth: ".grid-sizer",
  percentPosition: true,
  isOriginLeft: false,
  gutter: ".gutter_sizer"
});
.grid-sizer,
.masonry-item {
  width: 32%;
  margin-bottom: 2%;
  padding: 10px;
}

.gutter_sizer {
  width: 2%;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.masonry-item {
  border: 1px solid #DDD;
  -webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
  -moz-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
  -ms-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
  -o-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
}

.masonry-item:hover {
  -webkit-transform: translateY(-6px);
  -moz-transform: translateY(-6px);
  transform: translateY(-6px);
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.3);
}

.loadmoreBtn {
  display: block;
  text-align: center;
  padding: 10px;
  background-color: rebeccapurple;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout@4.2.0/dist/masonry.pkgd.min.js"></script>
<div id="masonryExampleWrapper">
  <div id="masonryContainer">
    <div class="grid-sizer"></div>
    <div class="gutter_sizer"></div>
    <div class="masonry-item">
      <span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no</span>
    </div>
    <div class="masonry-item">
      <span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.</span>
    </div>
    <div class="masonry-item">
      <span class="data-container">Lorem ipsum dolor sit amet, mel ad ubique iriure petentium, voluptatum interpretaris his no. Solum voluptatum appellantur cum no, fugit denique assentior vel ei, porro antiopam tractatos vim no. Affert oporteat qui cu, quo nostro possim aperiri cu. Ex vide inermis vix, quod veniam volutpat mea ad.Et qui modo soleat aperiri. Quo at probo labore integre, nam te modo iudicabit. Ea mutat inermis eos, ei usu soleat scripta repudiandae. Nec ea natum semper, cetero admodum eos eu. Placerat percipit reformidans an eam, vis in ridens ornatus efficiendi, elit labitur nam ne. Eum nonumy noster verear et, ex detracto electram eloquentiam mei.</span>
    </div>
    <!-- ko foreach :  results -->
    <div class="masonry-item">
      <span class="data-container" data-bind="text : $data"></span>
    </div>
    <!-- /ko -->
  </div>
  <a href="#" class="loadmoreBtn" data-bind="click : loadmore">load more!</a>
</div>

4

1 回答 1

1

desandro 在 github 上回答了我：

Masonry 使用 CSS 过渡来更新布局。如果您自己的 CSS 具有不透明度、顶部/左侧或变换的过渡，它们可能与 Masonry 冲突。一种解决方案是为过渡效果使用单独的元素

<div class="masonry-item">
   <div class="hover-card">

看演示

于 2017-05-06T08:19:58.123 回答