transition-basic-source.mustache revision 69d0a7351a7624ee341dbfd2ab1e6b38c01d8333
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen<div id="demo">
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen <a href="#">x</a>
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen</div>
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen<script type="text/javascript">
8d3278a82b964217d95c340ec6f82037cdc59d19Timo SirainenYUI().use('transition', function(Y) {
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen var node = Y.one('#demo');
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen node.one('a').on('click', function(e) {
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen e.preventDefault();
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen node.transition({
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen duration: 1, // seconds
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen easing: 'ease-out',
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen height: 0,
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen width: 0,
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen left: '150px',
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen top: '100px',
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen opacity: 0
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen }, function() {
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen this.remove();
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen });
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen });
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen});
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen</script>
8d3278a82b964217d95c340ec6f82037cdc59d19Timo Sirainen