[mootools]terug naar default height

[Pkunk]

Ik ben een beetje aan het spelen met mootools, maar ik heb het idee dat ik het verkeerd aanpak of verkeerd zit te googlen ofzo, want ik kan het even niet vinden.

Ik heb een element met de volgende css

Cascading Stylesheet:

overflow:hidden;
display:none;
height: 0px;

Die kan ik dan heel mooi open stuiteren met de onderstaande code:

JavaScript:

el.set('morph', {duration: 'long', transition: 'bounce:out'});
el.morph({display:'block',height: '100px'});

Maar dat klopt niet, want die height kan verschillen. Wat ik eigenlijk wil is height: 'inherit', maar die werkt niet.

Ik heb hier en daar wel wat code gevonden waar van tevoren de height werd opgeslagen en de elementen werden gehide bij onload, maar dat is nogal omslachtig natuurlijk. Moet simpeler kunnen toch?

[Bosmonster]

Als je wilt animeren zul je toch echt eerst de originele hoogte op moeten slaan. Heeft Mootools niet iets als een data-store per element zoals jQuery?

[Pkunk]

Bosmonster schreef op maandag 27 april 2009 @ 22:31:
Als je wilt animeren zul je toch echt eerst de originele hoogte op moeten slaan. Heeft Mootools niet iets als een data-store per element zoals jQuery?

Volgens mij wel, maar ik hoopte dat ik dat niet hoefde te gebruiken. Op m'n werk gebruiken we onze eigen js library die dat wel kan dus ik had verwacht dat mootools dat ook wel zou kunnen.

[harrald]

De animatie zal bij het niet meegeven van een begin positie beginnen vanaf de huidige positie (hoogte/breedte).
http://www.mootools.net/docs/core/Fx/Fx.Morph
@Bosmonster: Mootools was er zelfs eerder mee

[ Voor 13% gewijzigd door harrald op 27-04-2009 23:06 ]

[Pkunk]

harrald schreef op maandag 27 april 2009 @ 23:06:
De animatie zal bij het niet meegeven van een begin positie beginnen vanaf de huidige positie (hoogte/breedte).
http://www.mootools.net/docs/core/Fx/Fx.Morph
@Bosmonster: Mootools was er zelfs eerder mee

Ja maar ik wil geen eind positie meegeven. Da's een beetje het probleem. Ik wil van 0 --> 'inherit' en dat kan schijnbaar niet?

[jbdeiman]

Timlog schreef op dinsdag 28 april 2009 @ 08:57:
[...]

Ja maar ik wil geen eind positie meegeven. Da's een beetje het probleem. Ik wil van 0 --> 'inherit' en dat kan schijnbaar niet?

100% gebruiken of inherit werkt alleen als het item eromheen een bepaalde hoogte heeft. Ik weet niet of dat zo wil wat jij bedoeld.

[Cartman!]

Ik gebruik daar zelf Fx.Slide voor. Onload (of domready) gebruik ik iets als "element.fx.hide();" om alle elementen te hiden en onclick zet ik een "element.fx.toggle();" en dan werkt het al.

Hij fokt volgens mij gewoon op omdat je in CSS defined dat ie 0px; hoog is en niet zichtbaar is (display:none). Dan weet JS niet hoe hoog dat element eigenlijk is. Sowieso vind ik het netjes pas onload alles te hiden, iemand zonder JS krijgt anders de content nooit te zien.

[Bosmonster]

Timlog schreef op dinsdag 28 april 2009 @ 08:57:
[...]

Ja maar ik wil geen eind positie meegeven. Da's een beetje het probleem. Ik wil van 0 --> 'inherit' en dat kan schijnbaar niet?

Dat kan wel, maar natuurlijk niet als je wilt animeren. Daarvoor zal die toch de tussenliggende pixel-waardes moeten berekenen en moet ie weten hoeveel pixels 'inherit' dan vertegenwoordigt.

Wat je zou kunnen doen is hem op inherit zetten, pixel-waarde opvragen en weer teruggaan om alsnog te animeren, maar dat werkt natuurlijk niet lekker.

Wat je ook eventueel kunt proberen is animeren met %-waardes, maar daar zul je waarschijnlijk een custom animatie voor moeten schrijven.

[ Voor 25% gewijzigd door Bosmonster op 28-04-2009 11:00 ]