/5.0/demos/anim/node.html
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"><!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Demo - 节点实例动画操作</title>
- <link rel="stylesheet" type="text/css" href="//g.alicdn.com/kissy/k/5.0.1/css/base.css">
- <link rel="stylesheet" type="text/css" href="./assets/custombutton.css">
- <script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
- <style type="text/css">
- body{
- background: #fff;
- }
- .box {
- width: 160px;
- height: 160px;
- background: #AABBCC;
- }
- </style>
- </head>
- <body>
- <div class="box" id="anim_toggle">
- toggle 动画
- </div>
- <div id="demo_toggle"></div>
- <div class="box" id="anim_slide">
- slideUp/slideDown 动画
- </div>
- <div id="demo_slide"></div>
- <div class="box" id="anim_fade">
- fadeIn/fadeOut 动画
- </div>
- <div id="demo_fade"></div>
- <script type="text/javascript">
- require(['node','button'], function(Node, Button){
- var anim_toggle = Node.one("#anim_toggle"),
- anim_slide = Node.one("#anim_slide"),
- anim_fade = Node.one("#anim_fade");
- var demo_toggle = new Button({
- content: "toggle",
- render: "#demo_toggle"
- });
- demo_toggle.render();
- demo_toggle.on("click", function () {
- anim_toggle.toggle(1);
- });
- var demo_slide = new Button({
- content: "slideDown/slideUp",
- render: "#demo_slide"
- });
- demo_slide.render();
- demo_slide.on("click", function () {
- if (anim_slide.css("display") === "none") {
- anim_slide.slideDown();
- } else {
- anim_slide.slideUp();
- }
- });
- var demo_fade = new Button({
- content: "fadeIn/fadeOut",
- render: "#demo_fade"
- });
- demo_fade.render();
- demo_fade.on("click", function () {
- if (anim_fade.css("display") === "none")
- anim_fade.fadeIn();
- else
- anim_fade.fadeOut();
- });
- })
- </script>
- </body>
- </html></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">
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8"/>
- <title>Demo - 节点上的 stop 示例</title>
- <link href="//g.alicdn.com/kissy/k/5.0.1/css/base.css" rel="stylesheet"/>
- <link rel="stylesheet" type="text/css" href="./assets/custombutton.css">
- <style>
- body{
- background: #fff;
- }
- div.block {
- position: absolute;
- background-color: #abc;
- left: 0;
- top:0;
- width: 60px;
- height: 60px;
- margin: 5px;
- }
- </style>
- <script src="//g.alicdn.com/kissy/k/5.0.1/seed.js" data-config="{combine:true}"></script>
- </head>
- <body>
- <div style="position:relative;height:72px;">
- <div class="block"></div>
- </div>
- <script type="text/javascript">
- require("node,button", function(Node, Button) {
- var $ = Node.all;
- var go = new Button({
- content: "GO!"
- }), stop = new Button({
- content: "STOP!"
- }), back = new Button({
- content: "BACK!"
- });
- go.render();
- stop.render();
- back.render();
- /* Start animation */
- go.on("click", function(e) {
- go.set("disabled", true);
- back.set("disabled", true);
- $(".block").animate({left: (parseInt($(".block").css("left")) + 100) + 'px'}, 2, undefined, function() {
- go.set("disabled", false);
- back.set("disabled", false);
- });
- e.halt();
- });
- /* Stop animation when button is clicked */
- stop.on('click', function() {
- go.set("disabled", false);
- back.set("disabled", false);
- $(".block").stop();
- });
- /* Start animation in the opposite direction */
- back.on('click', function(e) {
- go.set("disabled", true);
- back.set("disabled", true);
- $(".block").animate({left: Math.max(parseInt($(".block").css("left")) - 100,0) + 'px'}, 2, undefined, function() {
- go.set("disabled", false);
- back.set("disabled", false);
- });
- e.halt();
- });
- });
- </script>
- </body>
- </html></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>