HTML5/CSS3/JS -- Transition sur hover

[Xaelias]

Bonjour à tous!

Je suis en train de me faire un petit site perso tout simple, et j'aurais voulu faire un effet qui me semble tout con, mais que je n'arrive pas à produire (probablement juste parce que je ne cherche pas avec les bons mots-clefs!).

Le principe est simple. En bas de la page, un footer. À l'origine il ne contenait qu'une ligne de remerciement avec un lien vers le background que j'utilisais (droits d'auteur toussa). Sauf qu'il est plus que probable que sur d'autres pages, j'ai un peu plus de trucs à mettre. Du coup j'étais parti pour mettre un hover, avec par défaut juste le mot "Crédits", et quand on passe dessus, l'affichage de tous les liens utilisés etc.

Pour l'instant ça donne quelque chose comme ça:

HTML:

<footer class=wrap>
	<div class=show>Credits</div>
	<div class=no-show>
		Blabla plus long
	</div>
</footer>

CSS:

footer
{
	position: fixed;
	bottom: 5px;
	right: 5px;
	text-align: right;
	border-radius: 10px;
	background-color: rgba(180,200,200,0.6);
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 6px;
}

.no-show, .wrap:hover .show
{
	display: none;
}

.wrap:hover .no-show
{
	display: inline-block;
}

Du coup j'aurais bien aimé avoir un effet de transition qui s'étale sur genre 1s, plutôt qu'un changement bien brusque.

J'ai essayer de jouer avec les propriétés transition et tout mais sans résultat...

Merci d'avance.

Xælias

[Scellow]

JQuery est ton amis :)

http://jqueryui.com/effect/

[romjpn]

Il faut mettre tes effets sur tout le footer :

<footer class="wrap">
<div class="show" style="float:right">Credits</div>
</footer>
<style>
footer
{
    width:100px;
position: fixed;
bottom: 5px;
right: 5px;
text-align: right;
border-radius: 10px;
background-color: rgba(180,200,200,0.6);
padding-left: 5px;
padding-right: 5px;
padding-bottom: 6px;
transition-property: width;
  transition-duration: 1s;
  transition-timing-function: ease;
}
footer:hover
{
width:300px;


}


footer:hover .show {display:none}
footer:hover:before {content:"Blabla plus long";float:right}
</style>

Sur Chrome c'est OK avec le float-right car sinon ça tremble. Sur FF le changement est un peu moins doux, on voit un peu le texte qui s'ajoute au-dessus :/. Mais ça marche relativement bien. J'ai simplifié le code.

Apparemment sous IE ça ne marche pas mais j'ai pas trop le temps de creuser !

[Guest]

Pour IE ça ne prend qu'à partir de la version 10 (ptet 11 j'ai pas de 10 pour vérifier) donc pas de soucis (je suppose du coup que tu as un IE9 )

[romjpn]

Au temps pour moi j'étais en mode dev "quirks" donc ça passait pas. Oui sous IE10 ça marche mais il y a le même petit effet de basculement gênant que sur FF.

[Nemasix]

Après je pense que le plus simple aussi, c'est de prendre du JS (et en l'occurence du JQuery ) dans ce cas. Au moins la transition se fait sur quasi tous les navigateurs avec le même effet