Mootools : un fondu… opaque

Mootools : un fondu… opaque

Difficulté

htmlcssMootools

Mootools nous permet d’animer facilement en fondu n’importe quel élément html.
En fait, le fondu :
- Modifie l’opacité de l’élément de n’importe quelle valeur entre 0 et 1,
- Fait apparaitre ou disparaitre l’élément par « in » ou « out ». Mais cela ne fonctionne pas toujours…


La propriété css3 concernée est opacity que l’on fait varier de 0 à 1

1. Exemple

En cliquant sur le bouton « Afficher » la div verte qui devrait s’afficher en fondu, s’affiche en cut…

Voici le code html :

<div>
	<div id="bloc1">
		Ma super div verte
	</div>
	<form action="#">
		<p><input type="button" id="bouton1" value="Afficher" /></p>
	</form>
	<br /><br />
	<div id="bloc2">
		Ma super div jaune
	</div>
	<form action="#">
		<p><input type="button" id="bouton2" value="Cacher" /></p>
	</form>
</div>

Voici les css :

<style type="text/css">
<!--
#bloc1, #bloc2{
	display:inline;
	background-color:green;
	padding:25px;
	width:150px;
	margin:25px;
	line-height : 4em;
	text-align:center;
	opacity:0;
}
#bloc2{
	background-color:yellow;
	opacity:1;
}

form,p{
	display:inline;
}
-->
</style>

Rien de compliqué : deux divs et deux boutons.

2. Animation de l’opacité avec mootools

Les codes sont équivalents pour faire apparaitre en fondu un élément :
$('bloc').morph({opacity:1});

$('bloc').tween('opacity','1');

$('bloc').fade('in');

$('bloc').fade(1);

3. Un élément invisible en css…

Il existe plusieurs façons de « cacher » un élément html avec les css :

visibility : hidden;

opacity : 0;

display:none;

Comme nous jouons sur la propriété opacity, c’est donc celle ci que nous utiliserons

A noter : display:none; fait littéralement disparaitre l’élément, il n’apparaîtra pas dans le flux, alors qu’avec les propriétés visibility et opacity, l’élément garde sa place dans le flux, c’est donc ceux-ci qu’il faudra utiliser pour le faire apparaitre en fondu.

4. Le problème…

Malgré la propriété css opacity à 0, la div verte apparait en « cut »… Et non pas en fondu….
Par contre, la div jaune disparait bien en fondu.

Le code Mootools :

<script type="text/javascript">
//<![CDATA[

window.addEvent('domready', function(){

	$('bouton1').addEvent('click',function() {
	$('bloc1').fade('in');
	});

	$('bouton2').addEvent('click',function() {
	$('bloc2').fade('out');
	});

});
//]]>
</script>

Et pourtant, le code est bon… Alors?

4. La solution…

Il est indispensable d’attribuer une nouvelle fois, avec Mootools la valeur 0 à opacity au chargement de la page, ou juste avant le déclenchement du fondu.

$('bloc1').setStyle('opacity',0);

Et voila…
Je n’explique pas ce comportement, d’autant que firebug montre bien une opacité à 0 via les css.
De plus il n’y a pas ce problème sur le fade out.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>