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. hdoj 3157 Crazy Circuits 【有下界最小流】

    题目:hdoj 3157 Crazy Circuits 题意:如今要制造一个电路板.电路板上有 n 个电子元件,各个元件之间有单向的电流流向.然后有一个 + .电流进入, -- 电流汇入,然后推断能不 ...

  2. delphi 保存 和 打开 TREE VIEW的节点已经展开的状态

    保存 和 打开 TREE VIEW的节点已经展开的状态 如果每次打开后能自动读取上次展开的状态就会非常快捷 下载地址: 实现方法 将已经展开的节点索引 放在一个文本中最后选中的那个节点索引放在最后一位 ...

  3. Mysql重要配置参数的整理2

    http://ssydxa219.iteye.com/category/209848 下面开始优化下my.conf文件(这里的优化只是在mysql本身的优化,之前安装的时候也要有优化) cat /et ...

  4. Linux下使用Eclipse开发C/C++程序

          相信好多人和我一样困惑,在网上查各种安装配置方法,可是试了所有的方法也还是没有成功,其实,这个并不能怪网上的方法不对,可能只是你没有点击一个键的原因,下面,我就来讲下怎样使用Eclipse ...

  5. [转] 使用NVM快速搭建NODE开发环境

    export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node 本文主要介绍最近自己碰到的几个坑以及搜索到的相应解决方案: 如何快速搭 ...

  6. cocos2d源码剖析

    1. TextureAtlas http://www.cocoachina.com/bbs/read.php?tid-311439-keyword-TextureAtlas.html 2. Label ...

  7. Ant学习笔记（2） 在Eclipse中使用Ant

    Eclipse默认提供了对Ant的支持,在Eclipse中不需要安装任何插件就能直接编辑和运行Ant.Eclipse中包含了一个Ant脚本编辑器,Ant脚本编辑器提供了对Ant脚本的语法搞来高亮.自动 ...

  8. 【bzoj2938】[Poi2000]病毒

    题目描述 二进制病毒审查委员会最近发现了如下的规律:某些确定的二进制串是病毒的代码.如果某段代码中不存在任何一段病毒代码,那么我们就称这段代码是安全的.现在委员会已经找出了所有的病毒代码段,试问,是否 ...

  9. 10.30 afternoon

    P76竞赛时间: ????年??月??日??:??-??:?? 题目名称 他 她 它 名称 he she it 输入 he.in she.in it.in 输出 he.out she.out it.o ...

  10. 工欲善其事必先利其器之Xcode高效插件和舒适配色

    功能强大的Xcode再配上高效的插件,必会让你的开发事半功倍.直接进入正题. Xcode插件安装方式: 1.github下载插件然后用xcode打开运行一遍,然后重启xcode. 2.安装插件管理Al ...