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. VS2012的安装项目只能用InstallShield Limited Edition[附资源下载]

    以前版本的Visual Stuido中安装项目都可以使用微软自家的Visual Studio Installer,但是到了VS2012这一切都变了,只能用InstallShield Limited E ...

  2. 未能正确加载“visual C++ package”包

    早上打开360要卸载软件,跳出说系统修复,习惯性的点击修复,结果修复后发现打开vs2012提示“未能正确加载“visual C++ package”包……..”, 重启也一样,google了下,是因为 ...

  3. iOS截取视频缩略图的两种方法

    前言: 看完了使用MPMoviePlayerController播放在线视频,在实际应用中有时候须要获取视频的缩略图,我们来看看怎样截取指定时间内的视频缩略图. 一  使用MPMoviePlayerC ...

  4. x264 编码器选项分析 (x264 Codec Strong and Weak Points) 1

    文章文件夹: x264 编码器选项分析 (x264 Codec Strong and Weak Points) 1 x264 编码器选项分析 (x264 Codec Strong and Weak P ...

  5. docker 镜像中包含数据库环境和运行环境

    需求: 一个镜像中要包含数据库环境和运行环境 Apache 环境 + mariadb 已经在拉取了Apache的运行环境 - 拉取代码 git https://github.com/timhaak/d ...

  6. 高仿优酷Android客户端图片左右滑动（自动切换）

    本例是用ViewPager去做的实现,支持自动滑动和手动滑动,不仅优酷网,实际上有很多商城和门户网站都有类似的实现: 具体思路: 1. 工程中需要添加android-support-v4.jar,才能 ...

  7. QDomDocument类

    QDomDocument类代表了一个XML文件 QDomDocument类代表整个的XML文件.概念上讲:它是文档树的根节点,并提供了文档数据的基本访问方法. 由于元素.文本节点.注释.指令执行等等不 ...

  8. 解决error:could not open ...jvm.cfg

    出现error:could not open '...jvm.cfg'大多是以前安装jdk或者jre的时候在注册表里注册过,现在安装的文件夹不在或者换了名字,有很多解决方法,最简单的一招是删除java ...

  9. 10.27 noip模拟试题

    1.铺瓷砖(tile.cpp/c/pas)[问题描述]有一面很长很长的墙. 你需要在这面墙上贴上两行瓷砖. 你的手头有两种不同尺寸的瓷砖,你希望用这两种瓷砖各贴一行.瓷砖的长可以用分数表示,贴在第一行 ...

  10. mysql 安装-编码

    mysql的安装过程相对较为简单,在这里就不阐述,我想说的问题是,关于编码的安装, 在安装到达'Please select the default character set'的时候,选择'Manul ...