Question

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

按下＆＃34后可以看到;加载更多！＆＃34;按钮砖石似乎重装了两次！

经过一些调试后，我发现＆＃34; transitionend＆＃34; event让masonry.js重新加载！

任何人都可以给我一个解决问题的小费吗？

谢谢

＆＃13;

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"
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

desandro在github上回答我：

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

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

See demo

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

1 个答案: