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. libcurl 使用的几个注意事项

    注:libcurl 入门指南( the tutorial ): http://curl.haxx.se/libcurl/c/libcurl-tutorial.html 0. 为使用的curl url ...

  2. 手把手教你在ubuntu下创建桌面快捷方式

    习惯使用windows的朋友来说创建桌面快捷方式简直就是so easy, 鼠标右键点击文件-->选择发送桌面快捷方式.就OK了.对于ubuntu下该如何创建桌面快捷方式呢?以下以创建eclips ...

  3. Mac OS命令行运行Sublime Text

    Opening Sublime Text on command line as subl on Mac OS? Mac OS subl http://www.phodal.com/blog/mac-o ...

  4. iOS viewController 和 view 的创建消失生命周期总结

    控制器创建的生命周期 1. 如果从stroryBoard 中产生一个controller,那么会先调用initWithCoder:, awakeFromNib, loadView,viewDidLoa ...

  5. WPF RichTextBox 如何滚动到光标所在位置、滚动条操作

    1.获取当前滚动条位置 //获取当前滚动条位置 richTextBox.VerticalOffset; richTextBox.HorizontalOffset; //获取当前光标位置 richTex ...

  6. Android开发手记(29) 基于Http的LaTeX数学公式转换器

    本文将讲解如何通过codecogs.com和Google.com提供的API接口来将LaTeX数学函数表达式转化为图片形式.具体思路如下: (1)通过EditText获取用户输入的LaTeX数学表达式 ...

  7. Linux下使用NMON监控、分析系统性能 -转载

    原帖地址:http://blog.itpub.net/23135684/viewspace-626439/ 谢谢原帖大人 一.下载nmon. 根据CPU的类型选择下载相应的版本:http://nmon ...

  8. 由App的启动说起（转）

    The two most important days in your life are the day you are born and the day you find out why. -- M ...

  9. C# 异步操作

    在程序中,普通的方法是单线程的.但中途如果有大型的操作,比如读取大文件,大批量操作数据库,网络传输等,都会导致程序阻塞,表现在界面上就是程序卡或者死掉,界面元素不动了,不响应了.C#异步调用很好的解决 ...

  10. spring jdbctemplate调用procedure（返回游标）

    package cn.com.git.htsc.uac.core.repository.report; import cn.com.git.htsc.uac.core.api.dto.report.R ...