0
내 프로젝트에서 knockout.js와 masonry.js를 사용하고 있습니다. 따라서 벽돌 문서에 따르면 reloaditems method을 사용하여 DOM의 변경 사항을 석조물에 적용하는 것이 좋습니다. 내 항목에 마우스를 올리면 전환 효과가 추가 될 때까지 문제가 없습니다. 여기 is the code.masonry.js - 항목에 전환 효과가있는 항목 레이아웃
"로드를 더 많이!" 버튼은 벽돌을 두 번 다시로드하는 것처럼 보입니다!
일부 디버그 후 나는 "transitionend"이벤트가 masonry.js를 다시로드한다는 것을 알았습니다!
아무도 나에게 문제를 해결하기위한 팁을 줄 수 있습니까?
는 github에 당신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/[email protected]/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>