在微信上关注我们
窗口滚动时为根据设置页面元素添加动画效果（仅在支持 CSS3 动画的浏览器上有效）。
下面的演示中包含了各种动画效果。
<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade'}">...</div>
<div class="am-panel am-panel-default" data-am-scrollspy="{animation: 'fade', delay: 300}">...</div>添加 data-am-scrollspy 属性，并设置相关属性。
| 属性 | 描述 |
|---|---|
data-am-scrollspy="{animation:'fade'}" | 动画类名，参见 Amaze UI 动画库，默认为 fade |
data-am-scrollspy="{animation:'fade', delay: 300}" | 延迟动画执行时间（ms），默认为 0 |
data-am-scrollspy="{animation:'fade', repeat: false}" | 是否重复动画，默认为 true |
通过 $().scrollspy(options) 设置，参数同上。
<div class="am-panel am-panel-primary" id="my-scrollspy">
<div class="am-panel-hd">ScrollSpy via JS
</div>
<div class="am-panel-bd">
生命是一团欲望，欲望不满足便痛苦，满足便无聊。人生就在痛苦和无聊之间摇摆。——叔本华
</div>
</div>
<script>
$(function() {
$('#my-scrollspy').scrollspy({
animation: 'slide-left',
delay: 500
})
});
</script>| 事件名称 | 描述 |
|---|---|
inview.scrollspy.amui | 元素进入窗口可视区域时触发 |
outview.scrollspy.amui | 元素离开窗口可视区域时触发 |
$(function() {
$('#my-scrollspy').on('inview.scrollspy.amui', function() {
console.log('进入视口');
}).on('outview.scrollspy.amui', function() {
console.log('离开视口');
});
});通过 Mutation Observer 可以实现动态加载元素的动画效果。
在下面插入一些元素试试：
<p><button class="am-btn am-btn-primary" id="doc-scrollspy-insert">插入</button></p>
<div id="doc-scrollspy-wrapper" data-am-observe>
<p>在下面插入一些元素试试：</p>
</div>$(function() {
var i = 1;
var $wrapper = $('#doc-scrollspy-wrapper');
var appendPanel = function(index) {
var panel = '<div class="am-panel am-panel-primary" ' +
'data-am-scrollspy="{animation: \'scale-up\'}">' +
'<div class="am-panel-bd">我是第' + index + '个插入的元素。</div></div>';
$wrapper.append(panel);
};
$('#doc-scrollspy-insert').on('click', function() {
appendPanel(i);
i++;
});
});