Animation/transition javascript
pfdp0
Messages postés
168
Date d'inscription
Statut
Membre
Dernière intervention
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour,
je suis depuis quelques semaines à la recherche de comment faire une transition/animation...
J'ai actuellement un bouton, et quand on clique dessus, une div apparait.
J'ai fais ça avec "display none/block".
J'aimerais que la div s'ouvre comme si à la base elle faisait 0px de hauteur et quand on clique sur le bouton elle en fait 100%... (sachant que je veux que ça soit comme si elle n'existe pas quand on n'a pas cliqué sur le bouton)
Merci d'avance pour votre aide
je suis depuis quelques semaines à la recherche de comment faire une transition/animation...
J'ai actuellement un bouton, et quand on clique dessus, une div apparait.
J'ai fais ça avec "display none/block".
J'aimerais que la div s'ouvre comme si à la base elle faisait 0px de hauteur et quand on clique sur le bouton elle en fait 100%... (sachant que je veux que ça soit comme si elle n'existe pas quand on n'a pas cliqué sur le bouton)
Merci d'avance pour votre aide
A voir également:
- Animation/transition javascript
- Telecharger javascript - Télécharger - Langages
- Dp animation maker - Télécharger - Animation
- Idée animation anniversaire adulte ✓ - Forum Loisirs / Divertissements
- Transition imovie télécharger - Télécharger - TV & Vidéo
- A javascript error occurred in the main process - Forum Windows
5 réponses
Lors du chargement de la page, tu testes pour savoir si le visiteur est sur ie ou autres.
En fonction du résultat, tu récupères la taille de la fenêtre du navigateur avec "window.innerHeight" ou "document.body.clientHeight" pour ie.
Ensuite, tu n'as plus qu'à faire une boucle de 0px au résultat ci-dessus.
En fonction du résultat, tu récupères la taille de la fenêtre du navigateur avec "window.innerHeight" ou "document.body.clientHeight" pour ie.
Ensuite, tu n'as plus qu'à faire une boucle de 0px au résultat ci-dessus.
Par contre, remet ta div en display: block et pas de height.
Un exemple :
Ça marche avec tous et ie9, à voir pour les versions antérieures de ie.
Un exemple :
<script>
var nav_visitor = navigator.userAgent.toLowerCase();
var isIE = (nav_visitor.indexOf("msie") > -1) ? true : false; // Si c'est IE -> true sinon false
var i = 0; var hauteur = window.innerHeight; var delai = 20; // délai en millisecondes
function uptodown(){
if(i<hauteur){
i = i+10;
document.getElementById('div_en_question').style.height = i+'px';
setTimeout("uptodown()", delai);
}
}
uptodown();
</script>
Ça marche avec tous et ie9, à voir pour les versions antérieures de ie.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Une transition est constituée à la base d'un temporisateur et d'une incrémentation ( ou décrémentation ).
Soit tu te tournes vers JQuery, soit tu te fais une page de test.
Il y a pas mal d'exemples sur la toile, à toi de les éplucher pour comprendre leurs fonctionnements ;-)
Bonne chance et bienvenue.
Soit tu te tournes vers JQuery, soit tu te fais une page de test.
Il y a pas mal d'exemples sur la toile, à toi de les éplucher pour comprendre leurs fonctionnements ;-)
Bonne chance et bienvenue.
