node.html | searchcode

/5.0/demos/anim/node.html

https://github.com/kissyteam/kissyteam.github.com
HTML | 388 lines | 333 code | 55 blank | 0 comment | 0 complexity | fedd657fdc9fdb6fa119827c2b29d2ca MD5 | raw file
Possible License(s): Apache-2.0

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scale=no">
	<title>Guides - KISSY v5.0 Documentation</title>
	<link rel="shortcut icon" href="/5.0/assets/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="/5.0/assets/css/base.css">
	<link rel="stylesheet" type="text/css" href="/5.0/assets/css/main.css">
	<link rel="stylesheet" type="text/css" href="/5.0/assets/css/github.css"/>
	<script type="text/javascript" src="http://g.tbcdn.cn/kissy/edge/2014.07.16/seed.js" data-config="{combine:true}"></script>
	<link rel="stylesheet" href="/5.0/assets/css/component.css">
</head>
<body>
	<div class="header">
		<div class="inner">
	<div class="toolbar">
		<a href="/5.0">
			<img class="mini-logo" src="/5.0/assets/img/mini-logo.png">
		</a>
		<ul class="nav clearfix">
			<li class="docs">
				<span>
					Docs
					<b class="caret"></b>
				</span>
				<ul>
					<li><a href="/5.0/guides/">Guides</a></li>
					<li><a href="/5.0/api">Api Docs</a></li>
					<li><a href="/5.0/demos">Demos</a></li>
				</ul>
			</li>
			<li class="more">
				<span>
					More
					<b class="caret"></b>
				</span>
				<ul>
					<li><a href="/5.0/more/faq.html">FAQ</a></li>
					<li><a href="http://gallery.kissyui.com/">Gallery</a></li>
					<li><a href="http://blog.kissyui.com/">KISSY Blog</a></li>
					<li><a href="https://github.com/daxingplay/kmc">KMC</a></li>
					<li><a href="https://github.com/minghe/generator-bee/wiki/generator-bee%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B">Generator</a></li>
				</ul>
			</li>
			<li class="split"></li>
			<li class="nav-other"><a href="/5.0/quick-start.html">Quick Start</a></li>
			<li class="nav-other"><a href="https://github.com/kissyteam/kissy">Contribute</a></li>
			<li class="nav-other"><a target="_blank" href="/5.0/kissyup-middle.html">KISSY UP</a></li>
		</ul>
	</div>
	<div class="search">
		<script>
			(function() {
			var cx = '003618533255763067140:5nkycw1pbey';
			var gcse = document.createElement('script');
			gcse.type = 'text/javascript';
			gcse.async = true;
			gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
			    '//www.google.com/cse/cse.js?cx=' + cx;
			var s = document.getElementsByTagName('script')[0];
			s.parentNode.insertBefore(gcse, s);
			})();
		</script>
		<gcse:search></gcse:search>
	</div>
</div>
	</div>
	<div class="main">
		<div class="demo">
			<div class="logo-on-top clearfix">
				<img src="/5.0/assets/img/logo-on-top.png">
			</div>
			<div class="inner clearfix">
				<div id="sidebar">
					<a class="link-apidocs btn btn-primary" href="../../api/classes/Anim.html">API Docs</a>
					<div class="panel panel-primary ajax-load ">
						<div class="panel-heading">
							<h3 class="panel-title">Features</h3>
						</div>
						<div class="panel-body">
							<p><a href="../../guides/anim/index.html">Anim基本介绍</a></p>
						</div>
					</div>
					<div class="panel panel-primary ajax-load ">
						<div class="panel-heading">
							<h3 class="panel-title">Demos</h3>
						</div>
						<div class="panel-body">
							<p><a href="../../demos/anim/anim-promise.html">Anim 使用 Promise API 示例</a></p><p><a href="../../demos/anim/anim-queue.html">动画队列示例</a></p><p><a href="../../demos/anim/custom.html">自定义动画</a></p><p><a href="../../demos/anim/index.html">anim的基本使用</a></p><p><a href="../../demos/anim/node.html">节点上的动画</a></p><p><a href="../../demos/anim/scroll.html">滚动示例</a></p><p><a href="../../demos/anim/timeline.html">动画曲线可视化</a></p><p><a href="../../demos/anim/tranform.html">跨浏览器transform</a></p>
						</div>
					</div>
				</div>
				<div id="main-content">
					<p></p>
<h1 id="节点上的动画">节点上的动画</h1><h2 id="节点实例动画操作">节点实例动画操作</h2><p><div class="ks-tabs ks-tabs-top" style="height:500px;">
    <div class="ks-tabs-bar">
        <div class="ks-tabs-tab ks-button">Source</div>
        <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Output</div>
        <div class="ks-tabs-tab ks-button">QRCode</div>
    </div>
    <div class="ks-tabs-body" style="overflow:hidden;">
        <div class="ks-tabs-panel">
            <div class="editor">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&#x2F;&gt;
&lt;title&gt;Demo - 节点实例动画操作&lt;&#x2F;title&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;&#x2F;&#x2F;g.alicdn.com&#x2F;kissy&#x2F;k&#x2F;5.0.1&#x2F;css&#x2F;base.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;.&#x2F;assets&#x2F;custombutton.css&quot;&gt;
&lt;script src=&quot;&#x2F;&#x2F;g.alicdn.com&#x2F;kissy&#x2F;k&#x2F;5.0.1&#x2F;seed.js&quot; data-config=&quot;{combine:true}&quot;&gt;&lt;&#x2F;script&gt;
&lt;style type=&quot;text&#x2F;css&quot;&gt;
	body{
        background: #fff;
    }
    .box {
        width: 160px;
        height: 160px;
        background: #AABBCC;
    }
&lt;&#x2F;style&gt;
&lt;&#x2F;head&gt;

&lt;body&gt;
&lt;div class=&quot;box&quot; id=&quot;anim_toggle&quot;&gt;
    toggle 动画
&lt;&#x2F;div&gt;
&lt;div id=&quot;demo_toggle&quot;&gt;&lt;&#x2F;div&gt;

&lt;div class=&quot;box&quot; id=&quot;anim_slide&quot;&gt;
    slideUp&#x2F;slideDown 动画
&lt;&#x2F;div&gt;

&lt;div id=&quot;demo_slide&quot;&gt;&lt;&#x2F;div&gt;

&lt;div class=&quot;box&quot;  id=&quot;anim_fade&quot;&gt;
    fadeIn&#x2F;fadeOut 动画
&lt;&#x2F;div&gt;

&lt;div id=&quot;demo_fade&quot;&gt;&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
	require([&#x27;node&#x27;,&#x27;button&#x27;], function(Node, Button){
		var anim_toggle = Node.one(&quot;#anim_toggle&quot;),
	    anim_slide = Node.one(&quot;#anim_slide&quot;),
	    anim_fade = Node.one(&quot;#anim_fade&quot;);

	    var demo_toggle = new Button({
	        content: &quot;toggle&quot;,
	        render: &quot;#demo_toggle&quot;
	    });
	    demo_toggle.render();
	    demo_toggle.on(&quot;click&quot;, function () {
	        anim_toggle.toggle(1);
	    });

	    var demo_slide = new Button({
	        content: &quot;slideDown&#x2F;slideUp&quot;,
	        render: &quot;#demo_slide&quot;
	    });
	    demo_slide.render();
	    demo_slide.on(&quot;click&quot;, function () {
	        if (anim_slide.css(&quot;display&quot;) === &quot;none&quot;) {
	            anim_slide.slideDown();
	        } else {
	            anim_slide.slideUp();
	        }
	    });

	    var demo_fade = new Button({
	        content: &quot;fadeIn&#x2F;fadeOut&quot;,
	        render: &quot;#demo_fade&quot;
	    });
	    demo_fade.render();
	    demo_fade.on(&quot;click&quot;, function () {
	        if (anim_fade.css(&quot;display&quot;) === &quot;none&quot;)
	            anim_fade.fadeIn();
	        else
	            anim_fade.fadeOut();
	    });
	})
&lt;&#x2F;script&gt;
&lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;</div>
        </div>
        <div class="ks-tabs-panel ks-tabs-panel-selected">
            <iframe class="output" frameborder="1">
            	
            </iframe>
        </div>
        <div class="ks-tabs-panel qrcode-wrap">
            <div class="qrcode"></div>
            <div class="content">
                <p class="title">查看移动端演示</p>
                <p class="qrcode-addr" qrcodeaddr="http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo1.html" ="text">
                    示例地址：
                    <a href="http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo1.html" target="_blank">http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo1.html</a>
                </p>
            </div>
        </div>
    </div>
</div></p>
<h2 id="节点上的 stop 示例">节点上的 stop 示例</h2><p><div class="ks-tabs ks-tabs-top" style="height:300px;">
    <div class="ks-tabs-bar">
        <div class="ks-tabs-tab ks-button">Source</div>
        <div class="ks-tabs-tab ks-button ks-tabs-tab-selected">Output</div>
        <div class="ks-tabs-tab ks-button">QRCode</div>
    </div>
    <div class="ks-tabs-body" style="overflow:hidden;">
        <div class="ks-tabs-panel">
            <div class="editor">
&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&#x2F;&gt;
&lt;title&gt;Demo - 节点上的 stop 示例&lt;&#x2F;title&gt;
&lt;link href=&quot;&#x2F;&#x2F;g.alicdn.com&#x2F;kissy&#x2F;k&#x2F;5.0.1&#x2F;css&#x2F;base.css&quot; rel=&quot;stylesheet&quot;&#x2F;&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot; href=&quot;.&#x2F;assets&#x2F;custombutton.css&quot;&gt;
&lt;style&gt;
	body{
        background: #fff;
    }
div.block {
    position: absolute;
    background-color: #abc;
    left: 0;
    top:0;
    width: 60px;
    height: 60px;
    margin: 5px;
}
&lt;&#x2F;style&gt;
&lt;script src=&quot;&#x2F;&#x2F;g.alicdn.com&#x2F;kissy&#x2F;k&#x2F;5.0.1&#x2F;seed.js&quot; data-config=&quot;{combine:true}&quot;&gt;&lt;&#x2F;script&gt;
&lt;&#x2F;head&gt;
&lt;body&gt;
&lt;div style=&quot;position:relative;height:72px;&quot;&gt;
    &lt;div class=&quot;block&quot;&gt;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;
&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
	require(&quot;node,button&quot;, function(Node, Button) {
	    var $ = Node.all;

	    var go = new Button({
	        content: &quot;GO!&quot;
	    }), stop = new Button({
	        content: &quot;STOP!&quot;
	    }), back = new Button({
	        content: &quot;BACK!&quot;
	    });
	    go.render();
	    stop.render();
	    back.render();

	    &#x2F;* Start animation *&#x2F;
	    go.on(&quot;click&quot;, function(e) {
	        go.set(&quot;disabled&quot;, true);
	        back.set(&quot;disabled&quot;, true);
	        $(&quot;.block&quot;).animate({left: (parseInt($(&quot;.block&quot;).css(&quot;left&quot;)) + 100) + &#x27;px&#x27;}, 2, undefined, function() {
	            go.set(&quot;disabled&quot;, false);
	            back.set(&quot;disabled&quot;, false);
	        });
	        e.halt();
	    });

	    &#x2F;* Stop animation when button is clicked *&#x2F;
	    stop.on(&#x27;click&#x27;, function() {
	        go.set(&quot;disabled&quot;, false);
	        back.set(&quot;disabled&quot;, false);
	        $(&quot;.block&quot;).stop();
	    });

	    &#x2F;* Start animation in the opposite direction *&#x2F;
	    back.on(&#x27;click&#x27;, function(e) {
	        go.set(&quot;disabled&quot;, true);
	        back.set(&quot;disabled&quot;, true);
	        $(&quot;.block&quot;).animate({left: Math.max(parseInt($(&quot;.block&quot;).css(&quot;left&quot;)) - 100,0) + &#x27;px&#x27;}, 2, undefined, function() {
	            go.set(&quot;disabled&quot;, false);
	            back.set(&quot;disabled&quot;, false);
	        });
	        e.halt();
	    });
	});

&lt;&#x2F;script&gt;
&lt;&#x2F;body&gt;
&lt;&#x2F;html&gt;</div>
        </div>
        <div class="ks-tabs-panel ks-tabs-panel-selected">
            <iframe class="output" frameborder="1">
            	
            </iframe>
        </div>
        <div class="ks-tabs-panel qrcode-wrap">
            <div class="qrcode"></div>
            <div class="content">
                <p class="title">查看移动端演示</p>
                <p class="qrcode-addr" qrcodeaddr="http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo2.html" ="text">
                    示例地址：
                    <a href="http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo2.html" target="_blank">http://docs.kissyui.com/5.0/demos/anim/cited-by-md/demo2.html</a>
                </p>
            </div>
        </div>
    </div>
</div></p>

				</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="wrap-disqus">
    <div class="top-repeat"></div>
	<div id="disqus_thread"></div>
</div>
<script>
    if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     //var disqus_identifier = '/anim';
     //var disqus_url = window.location;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }
</script>
<div class="other-page">
    <div class="wrap">
        <div class="content">
            <div class="wrap-content">
                <p>@2010 - 2112 KISSY UI LIBARAY</p>
                <div class="github-msg">
                    <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
                    <iframe src="http://ghbtns.com/github-btn.html?user=kissyteam&repo=kissy&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
                </div>
            </div>
        </div>
    </div>
</div>
	</div>
	<script type="text/javascript" src="/5.0/assets/js/ace-editor/ace.js"></script>
	<script type="text/javascript" src="/5.0/assets/js/qrcodejs/qrcode.min.js"></script>
	<script type="text/javascript" src="/5.0/assets/js/ajax-load.js"></script>
</body>
</html>