这个笔记,仅仅演示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. QEMU KVM Libvirt手册(10):Managing Virtual Machines with libvirt

    libvirt is a library that provides a common API for managing popular virtualization solutions, among ...

  2. 使用cAdvisor+Influxdb+Grafana监控系统

      今天准备开始研究研究当前非常流行的Grafana+Influxdb监控系统,两者都是非常轻量级的应用但是功能却异常强大,可以说Grafana在作图显示方面真的毫不逊色与Cacti. 组件介绍 cA ...

  3. Dubbo+zookeeper构建高可用分布式集群(一)-单机部署

    不久前,我们讨论过Nginx+tomcat组成的集群,这已经是非常灵活的集群技术,但是当我们的系统遇到更大的瓶颈,全部应用的单点服务器已经不能满足我们的需求,这时,我们要考虑另外一种,我们熟悉的内容, ...

  4. [Swift]LeetCode520. 检测大写字母 | Detect Capital

    Given a word, you need to judge whether the usage of capitals in it is right or not. We define the u ...

  5. [Swift]LeetCode867. 转置矩阵 | Transpose Matrix

    Given a matrix A, return the transpose of A. The transpose of a matrix is the matrix flipped over it ...

  6. Spark MLlib

    MLlib    数据挖掘与机器学习        数据挖掘体系 数据挖掘:也就是data mining,是一个很宽泛的概念,也是一个新兴学科,旨在如何从海量数据中挖掘出有用的信息来.         ...

  7. three.js全景漫游实践

    Hello 小伙伴们,如果觉得本文还不错,记得给个 star , 小伙伴们的 star 是我持续更新的动力!GitHub 地址 简介 全景图分两种 由六张正方形图片组成的SkyBox 一整张的宽高比为 ...

  8. 利用jmap和MAT等工具查看JVM运行时堆内存

    jmap JDK自带了一些工具可以帮助我们查看JVM运行的堆内存情况,常用的是jmap命令 jmap -heap <pid> 打印堆的使用情况 那么,从这个输出中我们也可以大致看出堆的结构 ...

  9. MyBatis 分页插件 PageHelper 使用

    1.  引入Maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns=&qu ...

  10. Ocelot统一权限验证

    Ocelot作为网关,可以用来作统一验证,接上一篇博客,我们继续 前一篇,我们创建了OcelotGateway网关项目,DemoAAPI项目,DemoBAPI项目,为了验证用户并分发Token,现在还 ...