Discussion :

[Invité]

Bonjour/soir,

j'ai un problème probablement très basique mais ça fait un moment que je coince dessus, j'ai cherché un peu partout mais je finis par donner ma langue au chat... et par chat, j'entends vous!

Alors l'idée est que je cherche à créer une transition d'un element ayant une taille fixe, positionné en bas de page dans un container ayant une taille de 100%. L'element est positionné en absolute avec un bottom:0 pour qu'il reste en bas! Pour le remettre en haut il me suffit de le remettre en position relative me direz vous... mais dans ce cas je ne peux pas lui appliquer de transition au changement de position ! Du coup j'ai essayé pas mal de trucs mais toujours pas de solution miracle : ce qui se rapproche le plus d'un début de solution est de faire une transition avec le bottom que je repasse à x% (mais le soucis est que je me retrouve jamais avec des mesures correctes : mon div est soit trop en haut ou trop en bas en fonction de l'affichage... logique au final!).

Si jamais quelqu'un a une solution à me proposer, je lui serais reconnaissant à jamais ! (Bon c'est sûr c'est pas une promesse de gloire et richesse éternelle, mais c'est un début !)

EDIT : Finalement je viens d'avoir un éclair de génie et je me suis donc reconnaissant à jamais! Pour ceux à qui ça peut servir, j'ai résolu mon problème grâce à une animation avec un forwards qui maintient l'état final du css ; l'exemple de code css pour l'animation (désolé pour l'indentation et pour les préfixes webkit):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
@-webkit-keyframes slidenav
{
0%{position:absolute;bottom:0%;}
99%{bottom:100%;}
100%{position:relative;}
}

associé à l'élément en question :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
div
{
-webkit-animation: slidenav ease 0.7s forwards;
}

En espérant que ça puisse servir à quelqu'un et si vous avez de quoi améliorer ce code je suis également preneur !

[Invité]

Bon finalement ce problème continue à me donner du fil à retordre, il est en partie résolu sur les navigateurs utilisant webkit, par contre Firefox et IE 10... le forwards est pas pris en compte. Je vous laisse mon code, si quelqu'un peut m'expliquer pourquoi ça fonctionne pas ça serait super, j'ai vérifié la fonction animation-fill-mode devrait être reconnue par ces navigateurs.

Pour la partie CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
#body
{
position:absolute;
margin:0;
width:100%;
height:100%;
overflow:hidden;
}
#nav
{
display:block;
width:100%;
position:absolute;
bottom:0px;
color:#151515;
height:128px;
overflow:hidden;
}
@-webkit-keyframes slidenav
{
0%{position:absolute;bottom:0%;}
99%{bottom:100%;}
100%{position:relative;top:-8px;}
}
@-moz-keyframes slidenav
{
0%{position:absolute;bottom:0%;}
99%{bottom:100%;}
100%{position:relative;top:-8px;}
}
@-o-keyframes slidenav
{
0%{position:absolute;bottom:0%;}
99%{bottom:100%;}
100%{position:relative;top:-8px;}
}
@keyframes slidenav
{
0%{position:absolute;bottom:0%;}
99%{bottom:100%;}
100%{position:relative;top:-8px;}
}

Pour déclencher l'animation j'utilise un poil de javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
<!--
	function hideintro()
	{
		document.getElementById('intro').style.top = '-100%';
		document.getElementById('nav').style.webkitAnimation ='slidenav ease 0.7s forwards';
		document.getElementById('nav').style.animation ='slidenav ease 0.7s forwards';
		document.getElementById('nav').style.mozAnimation ='slidenav ease 0.7s forwards';
		document.getElementById('nav').style.oAnimation ='slidenav ease 0.7s forwards';
		document.getElementById('nav').style.overflow ='initial';
		document.getElementById('body').style.overflow ='initial';		
	}
//-->			
</script>
 
<nav>
<ul>
<li class="navlogo"><a href="#" onclick="hideintro()"><img src="img/logo.png" /></a></li>
</ul>
</nav>