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 !