codecamp

配置项

配置项

  • 可用配置项
    • 初始隐藏 (attribute) ani-init-hide
    • 延迟 (attribute) ani-delay
    • 持续时长 (attribute) ani-duration
    • 重复次数 (attribute) ani-iteration
    • 触发元素 (attribute) ani-trigger
    • 自动滚动 (attribute) ani-scroll ani-scroll-offset

初始隐藏 (attribute) ani-init-hide

<div class="ani-auto  tada" ani-init-hide>
            hide
</div>

添加ani-init-hide 属性后初始会隐藏,动画开始的时候出现

延迟 (attribute) ani-delay

<div class="ani-auto  tada" ani-delay="1s">
            delay
</div>

ani-delay:参考animation-delay的值

持续时长 (attribute) ani-duration

<div class="ani-auto  tada" ani-duration="1s">
            duration
</div>

ani-duration:参考animation-duration的值

重复次数 (attribute) ani-iteration

<div class="ani-auto  wobble" ani-iteration="5">
            iteration
</div>

ani-duration:参考animation-iteration的值

触发元素 (attribute) ani-trigger

<div id="item_1" class="ani-auto  tada" >
 delay
</div>

<div id="item_2" class="ani-auto  flipInX" ani-trigger="#item_1">
 trigger
</div>

ani-trigger:参考jquery选择器

自动滚动 (attribute) ani-scroll ani-scroll-offset

<div class=" ani-auto  zoomIn"  ani-scroll ani-scroll-offset="-2%">
      <p>trigger scroll offset </p>
</div>

ani-scroll-offset 值:

  • 数值,如:-100 ==> 100px
  • 百分比,如:-2% ==> -2% * $('body').height()


基本使用方法
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }