Dojo 1.10笔记4 文字动画效果

Posted 秋意正寒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Dojo 1.10笔记4 文字动画效果相关的知识,希望对你有一定的参考价值。

这个笔记,仅仅演示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 文字动画效果的主要内容,如果未能解决你的问题,请参考以下文章

Dojo 学习笔记 之 Dojo hitch&partial

怎样用POWERPOINT制作变形动画?

仿知乎/途家导航栏渐变文字动画效果-b

Dojo1.11官方教程文档翻译(1.3)新的Dojo

点击页面出现富强民主这类文字动画效果

Android 学习笔记