ExtJS简单的动画效果(ext js淡入淡出特效)
1.html页面:Application HTML file - index.html
<html>
<head>
<title>ExtJs fadeIn() and fadeOut() example</title> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<style type="text/css">
.x-panel-body{
background-color:#8b8378;
color:#ffffff;
}
</style>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script> </head>
<body>
<div id="myExample">
</div>
</body>
</html>
2.app.js :Application JavaScript file - app.js
Ext.Loader.setConfig({
enabled: true
}); Ext.application({ name: 'myApp',
appFolder: 'app', controllers: [
'MyController'
], launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'myExample',
items: [
{
xtype: 'myView',
}
]
});
}
});
3.视图View: Application View - MyView.js
Ext.define('myApp.view.MyView' ,{
extend: 'Ext.container.Container',
alias : 'widget.myView', height: 400,
width: 400,
layout: {
align: 'stretch',
type: 'vbox'
},
defaults: {
margin: '5 5 5 5'
}, initComponent: function() {
var me = this; Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'Click here to see fadeOut() effect',
action: 'fadeInfadeOut',
pressed: true,
enableToggle: true
},
{
xtype: 'panel',
height: 200,
html: 'Just some TEXT for ExtJs page Animation ...',
id: 'section',
}
]
}); me.callParent(arguments);
}
});
4.控制器:Application Controller - MyController.js
Ext.define('myApp.controller.MyController', {
extend : 'Ext.app.Controller', //define the views
views : ['MyView'], init : function() {
this.control({ 'container' : {
render : this.onPanelRendered
},
'myView button[action=fadeInfadeOut]' : {
toggle : this.onFadeInFadeOutRequest
}
});
}, onPanelRendered : function() {
console.log('The container was rendered');
}, onFadeInFadeOutRequest : function(button, pressed) {
console.log('Button Click',pressed);
if(!pressed){
button.setText('Click here to see fadeIn() effect');
Ext.get("section").fadeOut({
opacity: 0,
easing: 'easeOut',
duration: 2000,
remove: false,
useDisplay: false
});
}
else {
button.setText('Click here to see fadeOut() effect');
Ext.get("section").fadeIn({
opacity: 1,
easing: 'easeOut',
duration: 2000
});
}
} });
ExtJS简单的动画效果(ext js淡入淡出特效)的更多相关文章
- ExtJS简单的动画效果2(ext js淡入淡出特效)
Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...
- 32.ExtJS简单的动画效果
转自:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html 说明:这篇文章的大部分内容来源于网上,经过自己实现其效果后,整理如下: 在进行 Java ...
- tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。
简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...
- 【从无到有】教你使用animation做简单的动画效果
今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...
- 如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码)
如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
- 用Direct2D和DWM来做简单的动画效果2
原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...
- 用Direct2D和DWM来做简单的动画效果
原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...
- js 淡入淡出的图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js淡入淡出
示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...
随机推荐
- hdoj 3157 Crazy Circuits 【有下界最小流】
题目:hdoj 3157 Crazy Circuits 题意:如今要制造一个电路板.电路板上有 n 个电子元件,各个元件之间有单向的电流流向.然后有一个 + .电流进入, -- 电流汇入,然后推断能不 ...
- delphi 保存 和 打开 TREE VIEW的节点已经展开的状态
保存 和 打开 TREE VIEW的节点已经展开的状态 如果每次打开后能自动读取上次展开的状态就会非常快捷 下载地址: 实现方法 将已经展开的节点索引 放在一个文本中最后选中的那个节点索引放在最后一位 ...
- Mysql重要配置参数的整理2
http://ssydxa219.iteye.com/category/209848 下面开始优化下my.conf文件(这里的优化只是在mysql本身的优化,之前安装的时候也要有优化) cat /et ...
- Linux下使用Eclipse开发C/C++程序
相信好多人和我一样困惑,在网上查各种安装配置方法,可是试了所有的方法也还是没有成功,其实,这个并不能怪网上的方法不对,可能只是你没有点击一个键的原因,下面,我就来讲下怎样使用Eclipse ...
- [转] 使用NVM快速搭建NODE开发环境
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node 本文主要介绍最近自己碰到的几个坑以及搜索到的相应解决方案: 如何快速搭 ...
- cocos2d源码剖析
1. TextureAtlas http://www.cocoachina.com/bbs/read.php?tid-311439-keyword-TextureAtlas.html 2. Label ...
- Ant学习笔记(2) 在Eclipse中使用Ant
Eclipse默认提供了对Ant的支持,在Eclipse中不需要安装任何插件就能直接编辑和运行Ant.Eclipse中包含了一个Ant脚本编辑器,Ant脚本编辑器提供了对Ant脚本的语法搞来高亮.自动 ...
- 【bzoj2938】[Poi2000]病毒
题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...
- 10.30 afternoon
P76竞赛时间: ????年??月??日??:??-??:?? 题目名称 他 她 它 名称 he she it 输入 he.in she.in it.in 输出 he.out she.out it.o ...
- 工欲善其事必先利其器之Xcode高效插件和舒适配色
功能强大的Xcode再配上高效的插件,必会让你的开发事半功倍.直接进入正题. Xcode插件安装方式: 1.github下载插件然后用xcode打开运行一遍,然后重启xcode. 2.安装插件管理Al ...