节点上的动画
节点实例动画操作
Source
Output
QRCode
<!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>
节点上的 stop 示例
Source
Output
QRCode
<!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>