这个笔记,仅仅演示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. 分享我在 vue 项目中关于 api 请求的一些实现及项目框架

    本文主要简单分享以下四点 如何使用 axios 如何隔离配置 如何模拟数据 分享自己的项目框架 本文主要目的为以下三点 希望能够帮到一些人 希望能够得到一些建议 奉上一个使用Vue的模板框架 我只是把 ...

  2. [Swift]LeetCode978. 最长湍流子数组 | Longest Turbulent Subarray

    A subarray A[i], A[i+1], ..., A[j] of A is said to be turbulent if and only if: For i <= k < j ...

  3. 了解django部署(Django + Uwsgi + Nginx)

    首先了解下基本概念: 1 WSGI WSGI:全称是Web Server Gateway Interface,是python应用程序或者框架和web服务器之间的一种接口,被广泛接受.WSGI不是服务器 ...

  4. java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.paipaixiu/com.example.paipaixiu.MASetSomeThing}: android.view.InflateException: Binary XML file line #19: Attempt to invo

    这个报错是因为Android布局的控件 <view android:layout_width="match_parent" android:layout_height=&qu ...

  5. cassandra vs mongo (1)存储引擎

    摘要 在MongoDB 初识篇中谈到过Mongo 与 Cassandra的区别,这边再谈谈Mongo与Cassandra的存储引擎差别 概括 存储引擎: 类型 功能 应用 hash 增删改.随机读.顺 ...

  6. asp.net core系列 26 EF模型配置(实体关系)

    一.概述 EF实体关系定义了两个实体互相关联起来(主体实体和依赖实体的关系,对应数据库中主表和子表关系). 在关系型数据库中,这种表示是通过外键约束来体现.本篇主要讲一对多的关系.先了解下描述关系的术 ...

  7. 从锅炉工到AI专家(11)(END)

    语音识别 TensorFlow 1.x中提供了一个语音识别的例子speech_commands,用于识别常用的命令词汇,实现对设备的语音控制.speech_commands是一个很成熟的语音识别原型, ...

  8. 深入探究Lua的GC算法(上)-《Lua设计与实现》

    对于内存的管理,是程序在应用的时候的必需知识点,<Lua设计与实现>中对Lua语言的GC原理做了一个详细的讲解,云风的blog也对其进行了详尽的讲解Lua GC 的源码剖析 系列 给出作者 ...

  9. 【深度学习与TensorFlow 2.0】卷积神经网络(CNN)

    注:在很长一段时间,MNIST数据集都是机器学习界很多分类算法的benchmark.初学深度学习,在这个数据集上训练一个有效的卷积神经网络就相当于学习编程的时候打印出一行“Hello World!”. ...

  10. 补习系列(7)-springboot 实现拦截的五种姿势

    目录 简介 姿势一.使用 Filter 接口 1. 注册 FilterRegistrationBean 2. @WebFilter 注解 姿势二.HanlderInterceptor 姿势三.@Exc ...