O'Reilly logo

Liferay User Interface Development by Frank Yu, Xinsheng Chen, Jonas X. Yuan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

How to do animation

First, we define the HTML part for the animation as follows:

<div id="demo" class="aui-module">
animationdefining<div class="aui-hd">
<h4>Animation Demo</h4>
<a href="http://www.liferay.com/" title="remove module" class="aui-remove"><em>X</em></a>
</div>
<div class="aui-bd">
<p>This an example of what you can do with the Alloy UI Animation Utility.</p>
<p><em>Click on the 'X' link to see the animation in action.</em></p>
</div>
</div>

In the JavaScript code, we load the anim-base module into the sandbox to achieve animation effect on a page.

AUI().use('anim-base', function(A) { var anim = new A.Anim({ node: '#demo', to: { opacity: 0 } }); var onClick = function(e) { e.preventDefault(); anim.run(); }; A.one('#demo .aui-remove').on('click', ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required