Mixitup

Fermé

isenaer Messages postés 2 Date d'inscription mardi 26 mai 2015 Statut Membre Dernière intervention 27 mai 2015 - 26 mai 2015 à 22:05
prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 - 27 mai 2015 à 19:19

Bonsoir a tous,

Pour ma formation, je dois reproduire la page de mixitup (https://www.kunkalabs.com/mixitup/ mais sans le plugin, uniquement du code jquery

pour l'ordre croissant , j'ais ceci :

$("#croissant").click(function(){
     conteneur.children().sort(function(a, b) {
     var tri = +a.getAttribute('data-value') - +b.getAttribute('data-value');
     return tri;
}).appendTo(conteneur);   
});

Je suis content sa fonctionne ;-)

l'HTML des rectangles:

<div id="SandBox" class="sandbox">
		<div class="mix category-1" id="7" data-value="7">7</div>
                <div class="mix category-2" id="9" data-value="9">9</div>
                <div class="mix category-1" id="4" data-value="4">4</div>
                <div class="mix category-2" id="6" data-value="6">6</div>
                <div class="mix category-1" id="10" data-value="10">10</div>
                <div class="mix category-1" id="2" data-value="2">2</div>
                <div class="mix category-2" id="8" data-value="8">8</div>
                <div class="mix category-2" id="3" data-value="3">3</div>
                <div class="mix category-1" id="1" data-value="1">1</div>
                <div class="mix category-2" id="11" data-value="11">11</div>
                <div class="mix category-2" id="5" data-value="5">5</div>
                <div class="mix category-2" id="12" data-value="12">12</div>
            </div>

ma question est comment faire pour obtenir la meme animation des rectangles SANS le plugin

merci à vous

3 réponses

Réponse 1 / 3

Utilisateur anonyme
27 mai 2015 à 02:34

C'est avec des transforms translate, en gros tu récupères la position d'arrivé et tu fais faire un translate vers cette position a ton objet

Réponse 2 / 3

isenaer Messages postés 2 Date d'inscription mardi 26 mai 2015 Statut Membre Dernière intervention 27 mai 2015
27 mai 2015 à 15:29

Tout d'abord merci a toi,

Après des heures de recherche, toujours pas d'animation sa commence a me rendre fou. Serait'il possible d'avoir plus de précision ? comment procéder?

merci ;-)

Réponse 3 / 3

prosthetiks Messages postés 1189 Date d'inscription dimanche 7 octobre 2007 Statut Membre Dernière intervention 12 juin 2020 431
27 mai 2015 à 19:19

Tes autres topics ont été supprimés, je re-post donc ici:

Voici un exemple: http://codepen.io/anon/pen/LVbMJR

J'ai juste défini une transition css sur l'element .mix et je set sa position en javascript à chaque fois que je le réordonne.

Newsletters