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淡入淡出特效）的更多相关文章

  1. ExtJS简单的动画效果2（ext js淡入淡出特效）

    Ext 开发小组则提供了 Fx 类集中处理了大部分常用的 js 动画特效,减少了我们自己手写代码的复杂度. 面我给出一个简单的实例代码,其中囊括了大部分的 Ext 动画效果: (注意导入js和css文 ...

  2. 32.ExtJS简单的动画效果

    转自:http://blog.sina.com.cn/s/blog_74684ec501015lhq.html 说明:这篇文章的大部分内容来源于网上,经过自己实现其效果后,整理如下: 在进行 Java ...

  3. tween.js是一款可生成平滑动画效果的js动画库。tween.js允许你以平滑的方式修改元素的属性值。它可以通过设置生成各种类似CSS3的动画效果。

    简要教程 tween.js是一款可生成平滑动画效果的js动画库.相关的动画库插件还有:snabbt.js 强大的jQuery动画库插件和Tweene-超级强大的jQuery动画代理插件. tween. ...

  4. 【从无到有】教你使用animation做简单的动画效果

    今天写写怎么用animation属性做一些简单的动画效果 在CSS选择器中,使用animition动画属性,调用声明好的关键帧 首先声明一个动画(关键帧): @keyframes name{ from ...

  5. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）

    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...

  6. 用Direct2D和DWM来做简单的动画效果2

    原文:用Direct2D和DWM来做简单的动画效果2 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detai ...

  7. 用Direct2D和DWM来做简单的动画效果

    原文:用Direct2D和DWM来做简单的动画效果 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/sunnyloves/article/detail ...

  8. js 淡入淡出的图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js淡入淡出

    示例: js淡入淡出 原理:更改css不透明数值 知识点: css不透明 filter:alpha(opacity:30); opacity:0.3;} 小技巧: 小于临界值,做加速 大于临界值,做减 ...

随机推荐

  1. [置顶] 获取激活码，激活myeclipse

    myeclipse10.0 正式版下载地址: http://downloads.myeclipseide.com/downloads/products/eworkbench/indigo/instal ...

  2. PMD使用手册

    文中测试例子均采用JHotDraw7源码,官网关于 JHotDraw的检测结果:http://pmd.sourceforge.net/reports/jhotdraw_JHotDraw.html 下载 ...

  3. 教你Mac OS系统四种改动Hosts文件的方法

    使用Mac OS X系统的用户.在某些时候可能遇到了须要改动系统Hosts文件的情况,那么Mac OS系统怎样改动Hosts文件呢?和Windows系统有何差别呢?我们知道事实上改动Hosts文件仅仅 ...

  4. 基于Lucene3.5.0怎样从TokenStream获得Token

    通过学习Lucene3.5.0的doc文档,对不同release版本号 lucene版本号的API修改做分析.最后找到了有价值的修改信息. LUCENE-2302: Deprecated TermAt ...

  5. (转）function($){}(window.jQuery) 是什么意思？

    function(){}(); (function(){})(); 这两个是self-invoking anonymous 自调匿名函数,用这类的方法,能强制使匿名函数成为表达式,把不合法变成合法. ...

  6. html px em pt长度单位(像素 相对长度 点)知识(转)

    html px em pt单位区 一.PX\EM\PT单位介绍 px单位名称为像素,相对长度单位,像素(px)是相对于显示器屏幕分辨率而言的国内推荐:em单位名称为相对长度单位.相对于当前对象内文本的 ...

  7. Sharpdevelop使用StyleCop

    使用Visual Studio时,用resharper+stylecop感觉不错.后来因为单位电脑实在太卡,平时自己写个小片段什么的就用SharpDevelop,这里需要设置一下. 安装StyleCo ...

  8. PHP 中xampp不能启动服务器的问题

    有时候别人电脑上面的XAMPP,你把安装文件拷贝下来后,会发现,自己的电脑上用不了 这个时候有很多种情况 1. 关闭你自己电脑上有可能暂用80端口的程序 2.D:\xampp\apache\conf\ ...

  9. MySQL命令行下查看运行状态

    查看MySQL的运行状态用命令行的show语句show status是查看MySQL运行情况,和上面那种通过pma查看到的信息基本类似. show variables是查看MySQL的配置参数,还可以 ...

  10. java异步上传图片

    第一步:引入需要的js <script src="/res/common/js/jquery.js" type="text/javascript"> ...