-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.html
79 lines (75 loc) · 2.92 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML>
<html id="html">
<head>
<meta charset="utf-8">
<title>动画组件</title>
<style>
#effect1{
width:200px;
height:200px;
display: inline-block;
*display: inline;
*zoom:1;
background:red;
}
#effect2{
width:200px;
height:200px;
background:blue
}
</style>
<script src="avalon.js"></script>
<script>
require(["mmAnimate.modern"], function(avalon) {
avalon.define("fx", function(vm) {
vm.effect1 = function() {
// avalon(document.getElementById("effect1")).hide(1000).delay(2000).show(1500)
avalon(document.getElementById("effect1")).animate({width: 400}, 1000, function() {
alert(1)
// document.getElementById("avalonStyle").innerHTML = ""
})
}
vm.effect2 = function() {
avalon(document.getElementById("effect2")).show(1000, {
before: function() {
this.style.display = "inline-block"
this.style.zoom = 1
}
}).delay(2000).hide(1500)
}
})
avalon.scan()
})
</script>
</head>
<body>
<p>依赖于mmAnimate</p>
<div ms-controller="fx">
<div style="height:210px;float:left;">
<pre id="effect1" >
</pre>
<pre id="effect2" style="display: none;float:right">
</pre>
</div>
<br clear="both"/>
<button ms-click="effect1" type="button">先隐藏再显示</button>
<button ms-click="effect2" type="button">先显示再隐藏</button>
</div>
<ul>
<li><a href="fn.animate.html">animate</a></li>
<li><a href="fn.delay.html">delay</a></li>
<li><a href="fn.show.html">show</a></li>
<li><a href="fn.hide.html">hide</a></li>
<li><a href="fn.fadeIn.html">fadeIn</a></li>
<li><a href="fn.fadeOut.html">fadeOut</a></li>
<li><a href="fn.slideDown.html">slideDown</a></li>
<li><a href="fn.slideUp.html">slideUp</a></li>
<li><a href="fn.slideToggle.html">slideToggle</a></li>
<li><a href="fn.stop.html">stop</a></li>
<li><a href="color.html">color</a></li>
<li><a href="count.html">count 与 revert配置项的使用</a></li>
<li><a href="scrollTop.html">scrollTop/scrollleft</a></li>
<li><a href="showhide.html">show/hide</a></li>
</ul>
</body>
</html>