这个笔记,仅仅演示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.x】笔记4 文字动画效果的更多相关文章

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

    demo.gif 效果图如上,简单分析下 1.导航栏一开始是隐藏的,随着scrollView滚动而渐变 2.导航栏左右两边的navigationItem是一直显示的 3.导航栏参考了途家app,使用了 ...

  2. jquery使用CSS3实现文字动画效果插件Textillate.js

    Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效 ...

  3. 仿flash的文字动画效果

    .tips{ font-size: 24px; font-family: sans-serif; font-weight: 600; text-shadow: 1px 1px #ffb700; col ...

  4. Vue过渡和动画效果展示(案例、GIF动图演示、附源码)

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  5. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  6. iOS 开源一个高度可定制支持各种动画效果,支持单击双击,小红点,支持自定义不规则按钮的tabbar

    TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...

  7. 最简单实用的JQuery实现banner图中的text打字动画效果!!!

    下面,就让小博详细介绍如何实现上面GIF实现的banner图中的文字动画效果,最简单实用的方法(鉴于代码量较小,就内嵌在一个HTML文件中了): 首先,我们要在header导入一个jQuery,并新建 ...

  8. JS框架_(Typed.js)彩色霓虹灯发光文字动画

    百度云盘 传送门 密码:8oei 发光文字动画效果: <!doctype html> <html> <head> <meta charset="ut ...

  9. iOS开发笔记7:Text、UI交互细节、两个动画效果等

    Text主要总结UILabel.UITextField.UITextView.UIMenuController以及UIWebView/WKWebView相关的一些问题. UI细节主要总结界面交互开发中 ...

随机推荐

  1. [Swift]LeetCode92. 反转链表 II | Reverse Linked List II

    Reverse a linked list from position m to n. Do it in one-pass. Note: 1 ≤ m ≤ n ≤ length of list. Exa ...

  2. [Swift]LeetCode949. 给定数字能组成的最大时间 | Largest Time for Given Digits

    Given an array of 4 digits, return the largest 24 hour time that can be made. The smallest 24 hour t ...

  3. Java数据结构和算法 - 什么是2-3-4树

    Q1: 什么是2-3-4树? A1: 在介绍2-3-4树之前,我们先说明二叉树和多叉树的概念. 二叉树:每个节点有一个数据项,最多有两个子节点. 多叉树:(multiway tree)允许每个节点有更 ...

  4. 工作随笔—Java容器基础知识分享(持有对象)

    1. 概述 通常,程序总是运行时才知道的根据某些条件去创建新对象.在此之前,不会知道所需对象的数量,甚至不知道确切的类型,为解决这个普遍的编程问题:需要在任意时刻和任意位置创建任意数量的对象,所以,就 ...

  5. JVM内存知识备忘

    又是一篇备忘... 主要记录一些知识,进行一些资源的汇总. 先来群里liufor大大提供的两张图,清晰易懂: Dockerized Java https://www.youtube.com/watch ...

  6. Python内置函数(38)——list

    英文文档: class list([iterable]) Rather than being a function, list is actually a mutable sequence type, ...

  7. 微信小程序实战–集阅读与电影于一体的小程序项目(八)

    31.电影详情页面 movie-template.wxml <view class="movie-container" catchtap="onMovieTap&q ...

  8. 死磕 java集合之WeakHashMap源码分析

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 WeakHashMap是一种弱引用map,内部的key会存储为弱引用,当jvm gc的时 ...

  9. Import Excel void (NPOI)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. .NET Core中的CSV解析库

    感谢 本篇首先特别感谢从此启程兄的<.NetCore外国一些高质量博客分享>, 发现很多国外的.NET Core技术博客资源, 我会不定期从中选择一些有意思的文章翻译总结一下. .NET ...