11540 sujets

JavaScript, DOM et API Web HTML5

Repositionnement d’éléments animé

Bonjour je cherche un moyen d'animer le repositionnement de mes div lorsque une de celle-ci est effacé.
Je m'explique : 

<div id="conteneur">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
<style>
#conteneur{
float:left;
width:400px;
}
#1,#2,#3,#4{
float:left;
width:200px;
height:200px;
background:red;
}
</style>


Lorsque que en javascript je vais supprimer la div #2, la #3 va prendre la place de la #2 et ainsi de suite, j'aimerais pouvoir animer ce "repositionnement".

Avez-vous une idée ?
Bonsoir,

Peut-être une piste pour animer tes blocs.
Conteneur en position:relative et sa largeur fixe comme dans ton exemple.
Les 4 Divs intérieures en position:absolute.
1=top:0; left:0; 2=top:0px; left:200px; 3=top:200px; left:0; 4=top;200px; left:200px etc.
Si div3 en top:200px; left:0px; disparait alors div4 en top:200px et left:200px s'anime sur la propriété left pour revenir à 0px, la div se déplace alors vers la gauche pour se placer à la place de la div3.
Une fois le principe compris il faut trouver l'algorithme pour tout automatiser.
0 - 1 - 2 - 3 - 4 - X - 6 - 7, si div[X] disparait = animation des div > X et ensuite on réinitialise les div > X en div [X-1].
Pour l'animation, 0=0.0, 1=0.200, 2=200.0, 3=200.200, 4=400.0, 5=400.200, 6=600.0, 7=600.200
Pour gérer les propriétés left (0 ou 200), tu devrais pouvoir tester si le nombre est pair ou impair.
Pour les propriétés top, X /2 tronqué (pour ne pas prendre ce qui se passe après la virgule) multiplié par 200...
En espérant que ça t'aide, il faudra un peu de JavaScript pour ces comportements.
Salut epic3000 !

Oublies JQuery et toute ces conneries ... 470 lignes de codes pour un truc qui se fait en 20 lignes c'est pas super sympa Guiwint Smiley cligne Bientot on codera plus en JS mais en JQuey Smiley fou

Donc pour ton truc epic3000, regardes du coté des transitions CSS3, en plus au lieux d'être cantonné aux effets de Jquery Quickstand, tu pourras travailler et rendre l'effet que tu veux (slide, explosion, fade in, fade out, shake ...).

Niveau code je te donne la base et c'est à toi de l'affiner en fonction de tes besoins !


<!DOCTYPE html>
<html lang="fr">
<head>
<style>
	#conteneur{
		position : absolute ;
		left : 50% ;
		margin-left : -300px ;
		width : 800px;
		background : #FFCC00 ;
	}

	#conteneur div  {
		float : left ;
		background : #FF0000 ;
		width : 200px ;
		height : 200px ;
		opacity : 1 ;
		font-size : 16px ;
		font-weight : bold ;
		-webkit-transition: width .4s ease-out , opacity .4s linear ;
		-moz-transition: width .4s ease-out , opacity .4s linear ;
		transition: width .4s ease-out , opacity .4s linear ;
	}

	#conteneur .Oust {
		width : 0 ;
		opacity : 0 ;
	}
</style>
<script>
	
	function DeleteMe(MyElement) {
	
		MyElement.classList.add('Oust') ;
		
	}	
	
</script>
</head>
<body>
<div id="conteneur">
	<div onmousedown="DeleteMe(this)">A</div>
	<div onmousedown="DeleteMe(this)">B</div>
	<div onmousedown="DeleteMe(this)">C</div>
	<div onmousedown="DeleteMe(this)">D</div>
	<div onmousedown="DeleteMe(this)">E</div>
	<div onmousedown="DeleteMe(this)">F</div>
	<div onmousedown="DeleteMe(this)">G</div>
	<div onmousedown="DeleteMe(this)">H</div>
	<div onmousedown="DeleteMe(this)">I</div>
	<div onmousedown="DeleteMe(this)">J</div>
	<div onmousedown="DeleteMe(this)">K</div>
	<div onmousedown="DeleteMe(this)">L</div>
</div>
</body>
</html>
Bonsoir à tous Smiley biggrin

AntiStatic a écrit :
Oublies JQuery et toute ces conneries ... 470 lignes de codes pour un truc qui se fait en 20 lignes c'est pas super sympa Guiwint Smiley cligne Bientot on codera plus en JS mais en JQuey Smiley fou
... on a des variantes possibles (sans les erreurs de français) :

"Oublie le Python et toutes ces conneries ...
Bientôt on codera plus en Langage Machine mais en Python"

"Oublie le Framework PHP et toutes ces conneries ...
Bientôt on codera plus en ad hoc PHP mais avec un Framework PHP"

"Oublie le Netbeans et toutes ces conneries ...
Bientôt on codera plus avec Bloc-notes mais avec Netbeans"

"Oublie la machine à laver et toutes ces conneries ...
Bientôt on ne lavera plus le linge au lavoir mais avec une machine"

... je vous laisse libre cours à votre imagination pour la suite Smiley cligne .

Et, pour finir, je n'avais pas l'impression que cette question :
Guiwint a écrit :
Est-ce que le plugin jQuery Quicksand répondrait à votre besoin ?
... puisse être interprétée comme :
Guiwint "le grand éclairé" a écrit :
Faites place manants, ici seul votre Châtelain peut vous guider vers la lumière et apaiser toutes vos souffrances. Mes brebis, écoutez solennellement ma parole, car seule ma parole est divine...

Pardonnez moi, pauvre pêcheur que je suis, pour cette réponse hors-sujet à un hors-sujet.

Bonne soirée à tous et bon code... Smiley langue
Guiwint si tu préfères utiliser un framework plutot que de coder en natif libre à toi ... mais proposer un script tout fait pour quelque chose qui se fait vite fait en quelques lignes de CSS + JS c'est juste ridicule ...

JQuery utilise le javascript ... tout ce que tu peux faire avec JQuery, tu peux le faire en javascript mais en moins lourd et plus rapide. Idem avec un framework PHP ...

Donc apprendre aux gens à bidouiller un framework plutot que d'apprendre à comprendre comment ca marche c'est pas une solution en soit .. c'est juste mon avis éclairé biensur Smiley cligne
Bonjour à tous,

@AntiStatic : présenter son avis éclairé c'est bien, mais votre Sancho Pansa vous dirait qu'un avis pertinent serait mieux, et un avis non hors-sujet serait parfait ! Ce type de hiatus philosophico-webeux ne génère pas suffisamment de vent pour mouvoir un moulin... et fait perdre du temps à tous.

Au pire, si vous souhaitez jouter avec ad hoc JS, jQuery, Mootools, ou même Backbone et Angular, et confronter vos courants de pensées, créer un post spécifique dans ce forum.

Bonne journée... Smiley biggrin



NB : Ah ! j'en ai 2 autres en tête Smiley langue !

"Oublie les emails et toutes ces conneries ...
Bientôt on écrira plus de lettre manuscrite mais on enverra que des emails"

"Oublie une réponse au sujet principal de la question et toutes ces conneries ...
Bientôt on ne répondra plus ce qu'on veut mais on donnera juste des réponses dans le cadre du sujet de la question Smiley bawling "
Je vois pas ou tu vois un hors sujet Guiwint Smiley smile epic3000 cherche un moyen "d'animer le repositionnement de mes div lorsque une de celle-ci est effacé".

C'est ce que fait le script que je lui ai proposé, il est à optimiser biensur, vu que epic3000 veux afficher ses blocs dans un carré sur plusieurs lignes. Mais s'il devait afficher sur une seule ligne, le script fonctionne ...

Pour le faire fonctionner sur X lignes, il faut le travailler un peu plus, mais HAugoyat a déjà donné des bonnes pistes : identifier les blocs qui nécessitent une animation particulière ...

Mais bon tout ca pour dire qu'il n'y a pas besoin de tout un framework pour faire une anim sur 4 blocs : un peu de CSS + JS et le tour est joué Smiley cligne
Modérateur
@AntiStatic : ta solution elle est pourtant pas terrible. Outre les attributs ontruc qui devraient être remplacés par des écouteurs d'évènements, vous utilisez des divs ce qui va poser des problèmes d'accessibilité.

Ne pas utiliser de librairies comme jQuery se défend, par contre il convient de faire du code javascript correctement.
En alternative, on pourrait utiliser jQuery (ou un autre) pour simplifier les choses et gérer la compatibilité, sans forcément utiliser de plugins.

@epic3000, si tu nous suit encore:
Pour l'animation à proprement parler, on peut utiliser du CSS (compatible navigateurs modernes, avec dégradation grâcieuse). Ou éventuellement, du javascript si le support de vieux IE est en question (mais ça se justifie de moins en moins, surtout que la compatibilité dans ce cas est parfaite).

Pour la bonne implémentation ça dépendra surtout du genre d'animation dans ce cas, et de ce que vous voulez faire: cacher l'élément ou le supprimer?
kustolovic j'ai repris le code que epic3000 nous a donné en rajoutant quelques blocs .. donc avec des DIV. Maintenant c'est juste une base, pour que le principe soit facilement compréhensible. Après si il préfères ajouter des écouteurs sur chaque bloc pourquoi pas même si cela ne me semble pas vraiment justifié.

Et puis niveau code javascript : MyElement.classList.add('Oust') ; c'est pas non plus du super lourd Smiley smile

Ce que je veux juste faire comprendre à epic3000, c'est que ca sert a rien de charger XX lignes de code pour faire un truc plutot simple à dev en CSS + JS. Qui plus est il aura la maitrise totale sur son code, les effets qu'il voudra rendre, etc ...
Modifié par AntiStatic (31 Mar 2014 - 14:56)
salut,
on pourrait comprendre le fait de ne pas vouloir utiliser des tonnes de librairies pour des choses qu'on pourrait réaliser avec un peu de jugeote. De plus, je crois que Quicksand se base également sur un autre plugin JQuery pour animer les transformations.
C'est vrai que passer par transition peut être une solution mais il faut tenir compte du fait que des navigateurs toujours d'actualité n'intègrent pas cela.
Cela dit ça reste simple de réaliser une animation en JS (pour peu qu'on connaisse le truc).
Si non, j'ai fait un petit exemple JS qui se base tout de même sur les transitions. Il faut juste savoir que le JS est entièrement lié au HTML de l'exemple et que s'il faut qu'il soit réutilisé, il faudra changer le JS. C'est juste pour dire qu'on peut aisément se passer de librairies pour un petit projet.
Voila ! Bravo Zelalsan bien joué !

C'est propre, clair, simple, optimisable à souhait et léger ! 40 lignes de code !

Big UP Smiley ola
Sujet clos
Aller à