BUI 動畫交互

option.effect

• Type: object
• Detail: 動畫效果, showIn(無動畫) | fadeIn | fadeInLeft | fadeInRight | fadeInDown | fadeInUp | zoomIn | bounceIn | rotateIn | flipInX | flipInY

例子:

<div id="toggle" style="width: 100px;height: 100px;background: red;"></div>

var toggle = bui.toggle({id:"toggle"});


    // 顯示
    toggle.show();
    // 隱藏
    toggle.hide();

動畫控制器

bui.animate(option)

點擊預覽

直接對元素執(zhí)行transform動畫

參數(shù): option是一個對象

option.id

• Type: string|object
• Detail: 要執(zhí)行動畫的元素ID,或?qū)ο?/code>

<div id="btn1" class="bui-btn">
  觸發(fā)動畫
</div>
<div id="bar1">我是動畫元素</div>

var uiAnimate = bui.animate({id:"#bar1"});


    $("#btn1").on("click",function () {
      uiAnimate.stop().left(100).start(function () {
        this.skewX(10).start(function () {
          this.left(200).start()
        });
      })
    })