Fatal编程技术网
  • sencha-touch/
  • Sencha touch Sencha淡入效果的工作示例

Sencha touch Sencha淡入效果的工作示例

sencha-touch

Sencha touch Sencha淡入效果的工作示例,sencha-touch,fade,Sencha Touch,Fade,有人能给我写完整的代码，告诉我如何使用sencha touch 1淡入淡出html元素吗？具体来说，我需要知道需要包含哪些html、javascript和css文件 我一直试图用一个简单的淡入淡出效果来处理div元素，但没有成功。要么我得到的方法没有发现错误，要么什么都没有发生。没有人在sencha论坛上回答我的问题。我很确定我只是错过了一些明显的东西 附加注释 以下是我尝试过的事情以及失败的原因： <!DOCTYPE html> <html> <head>

有人能给我写完整的代码，告诉我如何使用sencha touch 1淡入淡出html元素吗？具体来说，我需要知道需要包含哪些html、javascript和css文件

我一直试图用一个简单的淡入淡出效果来处理div元素，但没有成功。要么我得到的方法没有发现错误，要么什么都没有发生。没有人在sencha论坛上回答我的问题。我很确定我只是错过了一些明显的东西

附加注释

以下是我尝试过的事情以及失败的原因：

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {

      //    Ext.get('mydiv').hide();
      //    Ext.get('mydiv').fadeOut(); // fadeOut() does not exist error
      //    Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true}); // does nothing
      //    Ext.Anim.run(Ext.getDom('mydiv'), 'fade', {out:true}); // does nothing
      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>


嵌套列表-源代码浏览器
外部设置({
onReady:function（）{
//Ext.get（'mydiv'）.hide（）；
//Ext.get（'mydiv'）.fadeOut（）；//fadeOut（）不存在错误
//Ext.Anim.run（Ext.get（'mydiv'），'fade'，{out:true}）；//什么也不做
//Ext.Anim.run（Ext.getDom（'mydiv'），'fade'，{out:true}）；//什么都不做
}
});
你好，世界
给你：

          Ext.setup({
                onReady: function() {

                    var bool = true;

                    var button1 = new Ext.Button({
                        text:'Fade',
                        id:'button1',
                        handler: function(){
                            Ext.Anim.run(button2, 'fade', {
                                out: bool,
                                autoClear:false
                            });
                            bool = !bool;
                            console.log("fade end");
                        }
                      });

                    var button2 = new Ext.Button({
                        text:'Fade'
                    });

                    var toolbar = new Ext.Toolbar({
                        dock:'top',
                        title:'Fade',
                        items:[button1,{xtype:'spacer'},button2]
                    });

                    new Ext.Panel({
                        fullscreen: true,
                        dockedItems: toolbar
                    });
                }
            });
自动清除属性将使按钮在褪色后保持隐藏状态

好的，我终于找到了答案。正如Tdebaileul所解释的，autoClear会在褪色后隐藏元素。这是另一个例子

示例：淡入

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {
            Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:false, duration:1000, autoClear:false});
      }
    });
    </script>
</head>
<body><div id="mydiv" style="opacity:0;">hello world</div></body>
</html>


嵌套列表-源代码浏览器
外部设置({
onReady:function（）{
run（Ext.get（'mydiv'），'fade'，{out:false，duration:1000，autoClear:false}）；
}
});
你好，世界
示例：淡出

<!DOCTYPE html>
<html>
<head>
    <title>Nested List - Source Code Browser</title>
      <link rel="stylesheet" href="sencha-touch.css" type="text/css" id="stylesheet_file" />
    <script type="text/javascript" src="sencha-touch.js"></script>
    <script type="text/javascript">
   Ext.setup({
      onReady: function() {

         Ext.Anim.run(Ext.get('mydiv'), 'fade', {out:true, duration:1000, autoClear:false});

      }
    });
    </script>
</head>
<body><div id="mydiv">hello world</div></body>
</html>


嵌套列表-源代码浏览器
外部设置({
onReady:function（）{
run（Ext.get（'mydiv'），'fade'，{out:true，duration:1000，autoClear:false}）；
}
});
你好，世界
这里的繁荣是一把同时淡入淡出的小提琴

它使用具有绝对布局的容器

var into = Ext.create('Ext.Container', {
    width: 440,
    itemId: 'animTo',
    layout: {
        type: 'absolute'
    },
    style: {
        backgroundColor: '#000',
        padding: '20px'
    },
    renderTo: Ext.getBody()           
});

var one = Ext.create('Ext.Component', {
    width: 360,
    height: 100,
    x: 0,
    y: 0,
    itemId: 'one',
    style: {
        backgroundColor: 'green'
    }   
});

var two = Ext.create('Ext.Component', {
    width: 360,
    height: 500,
    x: 0,
    y: 0,
    itemId: 'two',
    style: {
        backgroundColor: 'red',
        opacity: 0
    }      
});


into.add(one);
into.add(two);
into.getEl().setHeight(two.getEl().getHeight() + 40);
two.hide();
var current = one;

Ext.create('Ext.button.Button', {
    text: 'Fade',
    renderTo: Ext.getBody(),
    listeners: {
        click: function() {
            current.getEl().fadeOut({ duration: 2000});
            current = current == one ? two : one;
            current.getEl().fadeIn({ duration: 2000});
        }
    }
});