hideDuration
更新日: 2019-12-19
非表示アニメーションのduration
をミリ秒で指定します。 0
を指定した場合、アニメーションは無効になります。
- 初期値 :
300
- 値 :
number
var grid = new Muuri(elem, {
hideDuration: 600
});
デモ
"アイテム表示/非表示"ボタンを押すと、非表示時に3秒間のアニメーションで非表示になります。
アイテム1
アイテム2
アイテム3
JavaScript
var grid = new Muuri('.grid', {
hideDuration: 3000,
});
document.querySelector('.show-items').addEventListener('click', function showItems() {
grid.getItems().forEach(function (item, i) {
if (item.isVisible()) {
grid.hide(item);
} else {
grid.show(item);
}
});
});
HTML
<button class="show-items">アイテム表示/非表示</button>
<div class="grid">
<div class="item">
<div class="item-content">アイテム1</div>
</div>
<div class="item">
<div class="item-content">アイテム2</div>
</div>
<div class="item">
<div class="item-content">アイテム3</div>
</div>
</div>
CSS
.grid {
position: relative;
}
.item {
display: block;
position: absolute;
width: 100px;
height: 100px;
margin: 5px;
z-index: 1;
color: #000;
border: 1px solid #000;
}
.item-content {
position: relative;
width: 100%;
height: 100%;
}
© 2015 Haltu Oy. Licensed under the MIT license
このコンテンツはHaltuによるMuuriドキュメントを翻訳/改変したものです。