1. 程式人生 > >【Dojo 1.10】筆記4 文字動畫效果

【Dojo 1.10】筆記4 文字動畫效果

req pla cdn .org script 如果 fun htm ready

這個筆記,僅僅演示dojo/fx模塊的slideTo()方法的簡單使用。

有關該模塊的用法,見API;有關Dojo的動畫、效果,見頁面 效果 和 動畫

1. 頁面組織

html部分同筆記3,js部分如下:

    <script src="https://cdn.bootcss.com/dojo/1.10.4/dojo.js" data-dojo-config="async: true"></script>

    <script>
        require([
            ‘dojo/dom‘,
            ‘dojo/fx‘, //多了fx模塊的引用
            
‘dojo/domReady!‘ ], function (dom, fx) { var greeting = dom.byId(‘greeting‘); greeting.innerHTML += ‘ from Dojo!‘; fx.slideTo({ node: greeting, top: 100, left: 200   }).play(); });
</script>

如果不想看,直接抽取關鍵代碼:

fx.slideTo({
    node: greeting,
    top: 100,
    left: 200
})
.play();

2. 代碼解釋

fx模塊調用slideTo方法,傳參是一個Object,Obj給三個參數,node、top和left,即對greeting這個節點進行移動100和200像素,實在太簡單了,看API就行,本篇僅僅作記錄用,知道fx模塊有這個功能。

有關slideTo()方法見下:

技術分享圖片

【Dojo 1.10】筆記4 文字動畫效果