masonry.js - 具有过渡效果的布局项

Question

我在我的项目中使用 knockout.js 和 masonry.js。因此，砌体文档建议我使用 reloaditems method 将 DOM 的更改应用于砌体。它工作正常，直到我为我的项目添加悬停过渡效果。这里 is the code.

正如您在按下 "load more!" 按钮后看到的，砌体似乎重新加载了两次！

经过一些调试后我发现 "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>

Answer 1

desandro 在 github 上回答了我：

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

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

See demo

masonry.js - 具有过渡效果的布局项

masonry.js - layout items with transition effect on them

jquery-masonry

css-transitions

knockout.js

transitionend

masonry