Forums
| Page 1 of 1 | [ 10 posts ] |
|
Hi,
Would appreciate any help on this example: http://jsfiddle.net/zT7nu/2/ Can't get the callback to work... It doesn't fire so I think something with the transition goes wrong? Code: YUI().use('node', 'transition', 'event', function(Y) { Y.one('#node2').on('click', function() { Y.one('#node').transition({ display: 'none' }, function() { Y.one('#node').transition({ display: 'block' }, function() { alert('foo'); }); }); }); }); |
Juan Ignacio DopazoYUI Contributor
|
I'm pretty sure you need to transition properties that have a numeric value like opacity, width, etc. I don't think Transition is expected to work with boolean styles.
|
|
Yes that was the problem. Using 'opacity' : 'value' instead solves the problem. See: http://jsfiddle.net/zT7nu/3/ for a working example
|
|
But it seems that it is not possible to do a fade in transition on a node that is hidden with 'display' : 'none'.
In jQuery there is a function called fadeIn() and works also if a node is hidden with display:none. Can this be achieved as easy as with jQuery using the YUI3 Transition module? |
Juan Ignacio DopazoYUI Contributor
|
I believe that's something YUI should emulate. I think there was a ticket asking for this, but I don't know what became of it.
|
|
|
|
yes, I was thinking about the same.
The fiddle becomes something like: http://jsfiddle.net/zT7nu/4/ |
|
The function show() is exactly what I've been looking for. It also accepts config parameters for the transition and a callback function. But however fading in a node does not work if CSS style of a node is set to display:none.
Could be related to this ticket: http://yuilibrary.com/projects/yui3/ticket/2531489 See updated jsFiddle: http://jsfiddle.net/zT7nu/6/ (Callback is fired, but node does not appear) |
|
Yes I think too it is related to the ticket you quote.
The function assumes that the start state is a visible one and show() (or _show()), restores that initial condition removing any style added by Node itself. Code: /** * The implementation for showing nodes. * Default is to toggle the style.display property. * @method _show * @protected * @chainable */ _show: function() { this.setStyle('display', ''); }, As things stand now I think the only workaround (if your start state is display:none) is to bake your own method around this, however it would be good if the maintainer could chime in with some suggestions |
|
Found a working solution. However this is little bit of an overkill to just fadein a node:
Code: Y.one('#node').setStyles({'display' : 'block', 'opacity' : 0}).transition({ opacity : 1 }); See http://jsfiddle.net/zT7nu/9/ |
| Page 1 of 1 | [ 10 posts ] |
| You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum |
-
Re: YUI Conf 2012 - program ?
Mauro Rossi on 05/23/13
-
Re: Simplified YUI3 Datatable cell formatting
Luke Smith on 05/23/13
-
Re: Simplified YUI3 Datatable cell formatting
Michael Malak on 05/23/13
-
Re: Simplified YUI3 Datatable cell formatting
Michael Malak on 05/23/13
-
Re: Mock Objects - How to handle calls to instanceof
Matt Parker on 05/23/13
-
Re: Simplified YUI3 Datatable cell formatting
Luke Smith on 05/22/13
-
Re: Simplified YUI3 Datatable cell formatting
Michael Malak on 05/22/13
-
Mock Objects - How to handle calls to instanceof
Amity Binkert on 05/22/13
Recent YUI Blog Posts
-
YUI Weekly for May 17th, 2013
Derek Gathright May 17th -
Yahoo’s International Team Is Hiring!
Jenny Donnelly May 17th -
YUICompressor 2.4.8 Released
Joey Smith May 16th -
YUI 3.10.1 Released to Fix SWF Vulnerability
Andrew Wooldridge May 14th -
YUI Weekly for May 10th, 2013
Derek Gathright May 13th -
Yahoo Hack Europe 2013
Matt Parker May 9th
Online Users
© 2006-2013 Yahoo! Inc. All rights reserved.
All code on this site is licensed under the BSD License unless stated otherwise.
About This Site · Security Contact Info
Powered by phpBB® Forum Software © phpBB Group