← Back to branch summary

~lutostag/ubuntu/utopic/maas/1.5.2

« back to all changes in this revision

Viewing changes to src/maasserver/static/jslibs/yui/3.4.1/docs/anim/index.html

  • Committer: Package Import Robot
  • Author(s): Andres Rodriguez
  • Date: 2012-03-15 18:14:08 UTC
  • mfrom: (1.1.3)
  • Revision ID: package-import@ubuntu.com-20120315181408-zgl94hzo0x4n99an
Tags: 0.1+bzr295+dfsg-0ubuntu2
* debian/patches:
  - 01-fix-database-settings.patch: Update to set PSERV_URL.
  - 02-pserv-config.patch: Set port to 8001.
* debian/maas.postinst: Run maas-import-isos on install.
* debian/control: Depends on rabbitmq-server.

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/maasserver/static/jslibs/yui/3.4.1/docs/anim/index.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
    <meta charset="utf-8">
 
5
    <title>Anim</title>
 
6
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
 
7
    <link rel="stylesheet" href="../assets/css/main.css">
 
8
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
 
9
    <script src="../../build/yui/yui-min.js"></script>
 
10
</head>
 
11
<body>
 
12
 
 
13
<div id="doc">
 
14
    <h1>Anim</h1>
 
15
 
 
16
    
 
17
        <a href="#toc" class="jump">Jump to Table of Contents</a>
 
18
    
 
19
 
 
20
    <div class="yui3-g">
 
21
        <div id="main" class="yui3-u">
 
22
            <div class="content"><div class="intro">
 
23
    <p>The Anim Utility provides the ability to animate changes to style properties. Advanced easing equations are provided for more interesting animated effects.</p>
 
24
    <p><strong>NOTE:</strong> Depending on which features are required, you may want to consider using the <a href="../transition/">Transition Utility</a> as an alternative to Anim.  The Transition Utility isn't as feature rich as Anim, but it leverages native CSS Transitions when possible, provides a smaller payload, and can be hardware-accelerated.</p>
 
25
</div>
 
26
<h2 id="getting-started">Getting Started</h2>
 
27
 
 
28
<p>
 
29
To include the source files for Anim and its dependencies, first load
 
30
the YUI seed file if you haven't already loaded it.
 
31
</p>
 
32
 
 
33
<pre class="code prettyprint">&lt;script src=&quot;http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.4.1&#x2F;build&#x2F;yui&#x2F;yui-min.js&quot;&gt;&lt;&#x2F;script&gt;</pre>
 
34
 
 
35
 
 
36
<p>
 
37
Next, create a new YUI instance for your application and populate it with the
 
38
modules you need by specifying them as arguments to the <code>YUI().use()</code> method.
 
39
YUI will automatically load any dependencies required by the modules you
 
40
specify.
 
41
</p>
 
42
 
 
43
<pre class="code prettyprint">&#x2F;&#x2F; Create a new YUI instance and populate it with the required modules.
 
44
YUI().use(&#x27;anim&#x27;, function (Y) {
 
45
    &#x2F;&#x2F; Anim is available and ready for use. Add implementation
 
46
    &#x2F;&#x2F; code here.
 
47
});</pre>
 
48
 
 
49
 
 
50
<p>
 
51
For more information on creating YUI instances and on the
 
52
<a href="http://yuilibrary.com/yui/docs/api/classes/YUI.html#method_use"><code>use()</code> method</a>, see the
 
53
documentation for the <a href="../yui/index.html">YUI Global object</a>.
 
54
</p>
 
55
 
 
56
<div>
 
57
    <h3 id="instantiating">Creating an Animation Object</h3>
 
58
 
 
59
    <p>Your Animation implementation will consist of one or more instances of the <code>Anim</code>.</p>
 
60
    <p>To create an <code>Anim</code> instance on your page, pass it a configuration object including the <code>node</code> or selector query for the node that you wish to animate and a <code>to</code> containing the properties you wish to animate.</p>
 
61
 
 
62
<pre class="code prettyprint">var myAnim = new Y.Anim({
 
63
    node: &#x27;#demo&#x27;,
 
64
    to: {
 
65
        width: 0,
 
66
        height: 0
 
67
    }
 
68
});</pre>
 
69
 
 
70
 
 
71
    <p>To begin the actual animation, call the <code>run</code> method on your <code>Anim</code> instance.</p>
 
72
 
 
73
<pre class="code prettyprint">myAnim.run();</pre>
 
74
 
 
75
 
 
76
    <p>See <a href="../api/module_anim.html">the API documentation for the Anim object</a> for more information about its methods and properties.</p>
 
77
 
 
78
    <h2 id="using">Using Animation</h2>
 
79
                        
 
80
    <h3 id="attributes">Accessing Animation Attributes</h3>
 
81
 
 
82
    <p>In addition to passing a configuration object to the <code>Anim</code> constructor, you can access the attributes of your <code>Anim</code> instance via the <code>set</code> and <code>get</code> methods.</p>
 
83
 
 
84
<pre class="code prettyprint">var myAnim = new Y.Anim({
 
85
    node: &#x27;#demo&#x27;,
 
86
    to: {
 
87
        width: 0,
 
88
        height: 0
 
89
    }
 
90
});</pre>
 
91
 
 
92
 
 
93
    <h3 id="anim-to">Setting a To Value</h3>
 
94
    <p>A <code>node</code> attribute and a <code>to</code> attribute containing one or more properties to animate are the minimum requirements for running an animation.</p>
 
95
 
 
96
    <p>The value of a <code>to</code> can optionally be a function.  If a function is used, it receives the <code>node</code> as its only argument.  The return value of the function becomes the <code>to</code> value for that <code>run</code> of the animation.</p>
 
97
 
 
98
<pre class="code prettyprint">var myAnim = new Y.Anim({
 
99
    node: &#x27;#demo&#x27;,
 
100
    to: {
 
101
        width: function(node) {
 
102
            return node.get(&#x27;offsetWidth&#x27;) &#x2F; 2; 
 
103
        },
 
104
        height: 0
 
105
    }
 
106
});</pre>
 
107
 
 
108
 
 
109
    <h3 id="anim-from">Setting a From Value</h3>
 
110
                                
 
111
    <p>Use the optional <code>from</code> attribute to start the animation from a specific value.  When <code>from</code> is omitted, the current value is used.</p>
 
112
 
 
113
    <p>Like the <code>to</code> attribute, the value of a <code>from</code> property can optionally be a function.  If a function is used, it receives the <code>node</code> as its only argument.  The return value of the function becomes the <code>from</code> value for that <code>run</code> of the animation.</p>
 
114
 
 
115
<pre class="code prettyprint">var myAnim = new Y.Anim({
 
116
    node: &#x27;#demo&#x27;,
 
117
    from: {
 
118
        width: 0,
 
119
        height: function(node) {
 
120
            return node.get(&#x27;winHeight&#x27;);
 
121
        } 
 
122
    },
 
123
 
 
124
    to: {
 
125
        width: 0,
 
126
        height: 0
 
127
    }
 
128
});</pre>
 
129
 
 
130
 
 
131
    <h3 id="anim-events">Listening for Events<a name="events"></a></h3>
 
132
 
 
133
    <p>The Animation Utility defines events useful for hooking into the various stages of an animation.  The <code>on</code> method is used to attach event listeners.</p>
 
134
<pre class="code prettyprint">var myAnim = new Y.Anim({
 
135
    node: &#x27;#demo&#x27;,
 
136
    to: {
 
137
        width: 0,
 
138
        height: 0
 
139
    }
 
140
});
 
141
 
 
142
myAnim.on(&#x27;end&#x27;, function() {
 
143
    myAnim.get(&#x27;node&#x27;).addClass(&#x27;yui-hidden&#x27;);
 
144
});</pre>
 
145
 
 
146
</div>
 
147
 
 
148
 
 
149
 
 
150
 
 
151
</div>
 
152
        </div>
 
153
 
 
154
        <div id="sidebar" class="yui3-u">
 
155
            
 
156
                <div id="toc" class="sidebox">
 
157
                    <div class="hd">
 
158
                        <h2 class="no-toc">Table of Contents</h2>
 
159
                    </div>
 
160
 
 
161
                    <div class="bd">
 
162
                        <ul class="toc">
 
163
<li>
 
164
<a href="#getting-started">Getting Started</a>
 
165
<ul class="toc">
 
166
<li>
 
167
<a href="#instantiating">Creating an Animation Object</a>
 
168
</li>
 
169
</ul>
 
170
</li>
 
171
<li>
 
172
<a href="#using">Using Animation</a>
 
173
<ul class="toc">
 
174
<li>
 
175
<a href="#attributes">Accessing Animation Attributes</a>
 
176
</li>
 
177
<li>
 
178
<a href="#anim-to">Setting a To Value</a>
 
179
</li>
 
180
<li>
 
181
<a href="#anim-from">Setting a From Value</a>
 
182
</li>
 
183
<li>
 
184
<a href="#anim-events">Listening for Events<a name="events"></a></a>
 
185
</li>
 
186
</ul>
 
187
</li>
 
188
</ul>
 
189
                    </div>
 
190
                </div>
 
191
            
 
192
 
 
193
            
 
194
                <div class="sidebox">
 
195
                    <div class="hd">
 
196
                        <h2 class="no-toc">Examples</h2>
 
197
                    </div>
 
198
 
 
199
                    <div class="bd">
 
200
                        <ul class="examples">
 
201
                            
 
202
                                
 
203
                                    <li data-description="Creating and using a simple animation.">
 
204
                                        <a href="basic.html">Basic Animation</a>
 
205
                                    </li>
 
206
                                
 
207
                            
 
208
                                
 
209
                                    <li data-description="The Animation Utility allows you to implement &#x27;easing effects&#x27; &mdash; for example, when an animation gradually slows down as it nears completion, that&#x27;s an easing effect known as &#x27;ease-in&#x27;.  This example shows you how to use easing effects with your animations.">
 
210
                                        <a href="easing.html">Easing Effects</a>
 
211
                                    </li>
 
212
                                
 
213
                            
 
214
                                
 
215
                                    <li data-description="Color animations can be effective indicators of state during the lifespan of a dynamic page.  This example shows you how to animate color attributes of an element.">
 
216
                                        <a href="colors.html">Animating Colors</a>
 
217
                                    </li>
 
218
                                
 
219
                            
 
220
                                
 
221
                                    <li data-description="The direction attribute can be used to reverse the animation on alternate iterations.">
 
222
                                        <a href="alt-iterations.html">Alternating Iterations</a>
 
223
                                    </li>
 
224
                                
 
225
                            
 
226
                                
 
227
                                    <li data-description="This example shows you how to animate the xy coordinates of an element.">
 
228
                                        <a href="anim-xy.html">Animating XY Position</a>
 
229
                                    </li>
 
230
                                
 
231
                            
 
232
                                
 
233
                                    <li data-description="This example demonstrates animating an element along a curved path using bezier control points.">
 
234
                                        <a href="curve.html">Animating Along a Curved Path</a>
 
235
                                    </li>
 
236
                                
 
237
                            
 
238
                                
 
239
                                    <li data-description="The reverse attribute allows you to change the run direction of an animation.">
 
240
                                        <a href="reverse.html">Reversing an Animation</a>
 
241
                                    </li>
 
242
                                
 
243
                            
 
244
                                
 
245
                                    <li data-description="This example demonstrates how to use the end event.">
 
246
                                        <a href="end-event.html">Using the End Event</a>
 
247
                                    </li>
 
248
                                
 
249
                            
 
250
                                
 
251
                            
 
252
                                
 
253
                            
 
254
                                
 
255
                            
 
256
                        </ul>
 
257
                    </div>
 
258
                </div>
 
259
            
 
260
 
 
261
            
 
262
                <div class="sidebox">
 
263
                    <div class="hd">
 
264
                        <h2 class="no-toc">Examples That Use This Component</h2>
 
265
                    </div>
 
266
 
 
267
                    <div class="bd">
 
268
                        <ul class="examples">
 
269
                            
 
270
                                
 
271
                            
 
272
                                
 
273
                            
 
274
                                
 
275
                            
 
276
                                
 
277
                            
 
278
                                
 
279
                            
 
280
                                
 
281
                            
 
282
                                
 
283
                            
 
284
                                
 
285
                            
 
286
                                
 
287
                                    <li data-description="Shows how to create a simple plugin to animate the Overlay&#x27;s movement and visibility.">
 
288
                                        <a href="../overlay/overlay-anim-plugin.html">Animation Plugin</a>
 
289
                                    </li>
 
290
                                
 
291
                            
 
292
                                
 
293
                                    <li data-description="Working with multiple YUI instances.">
 
294
                                        <a href="../yui/yui-multi.html">Multiple Instances</a>
 
295
                                    </li>
 
296
                                
 
297
                            
 
298
                                
 
299
                                    <li data-description="How to make an animated node a Drop target.">
 
300
                                        <a href="../dd/anim-drop.html">Animated Drop Targets</a>
 
301
                                    </li>
 
302
                                
 
303
                            
 
304
                        </ul>
 
305
                    </div>
 
306
                </div>
 
307
            
 
308
        </div>
 
309
    </div>
 
310
</div>
 
311
 
 
312
<script src="../assets/vendor/prettify/prettify-min.js"></script>
 
313
<script>prettyPrint();</script>
 
314
 
 
315
</body>
 
316
</html>