Plugin Isotope, transition avec chrome et safari

**cleo57** · 18/01/2016, 22h20

Bonjour,
Je rencontre un problème sur mon site au moment de l'affichage des pages filtrées : les transitions sont saccadées sous chrome et safari alors que tout est fluide avec firefox. Je n'arrive pas à comprendre d'où cela peut venir.

Voici mon Html :

Code html :

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html> 
<html lang="fr"> 
 
<head> 
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
    <title>Accueil</title> 
    <meta name="description" content="" /> 
 
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="lightbox.css">
 
    <link href='https://fonts.googleapis.com/css?family=Special+Elite' rel='stylesheet' type='text/css'>
 
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
</head> 
 
<body id="accueil">
 
<header>
    <section class="container">
        <div id="logo">
            <img src="img/logo.png">
        </div>
        <nav>
            <ul id="filtre">
                <li class="active"><a href="#" data-filtre="*">All</a></li>
                <li><a href="#" data-filtre=".diary">Diary</a></li>
                <li><a href="#" data-filtre=".lith">Lith</a></li>
                <li><a href="#" data-filtre=".color">Color</a></li>
            </ul>
        </nav>
    </section>
    </header>
 
 
	<section id="folio">
 
        <div class="projet diary">            
            <a href="img/image-1.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-1.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-2.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-2.jpg"></a>
        </div>
 
        <div class="projet diary">
            <a href="img/image-3.jpg" data-lightbox="portfolio-diary" data-title="Légende de l'image"><img src="img/image-3.jpg"></a>
        </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="js/lightbox.js"></script>
    <script src="js/isotope.js"></script>
    <script src="js/site.js"></script>
 
</body>
</html>

Une partie du CSS:

Code css :

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
/* ---- ISOTOPE CLASSES ANIMATION ---- */
 
.isotope,
.isotope .isotope-item {
  /* change duration value to whatever you like */
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}
 
.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}
 
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:         top, left, opacity;
          transition-property:         transform, opacity;
}
/*BODY*/
 
#folio {width: 980px; position: relative; margin: 50px auto;}
#folio:after {content: ''; display: block; width: 0px; height: 0px; clear: both;}
 
.projet {width: 225px; background: #fff; float: left; margin: 10px; overflow: hidden; transition: all 0.3s;}
.projet:hover {border: 1px solid #fff; box-shadow: 0 0 10px #777;}
.projet img {width: 100%;}

La partie Jquery:

Code jquery :

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
44
45
46
47
48
49
50
 
 
$(function() {
 
 
    // Isotope projets folio
 
    $('#folio').isotope({
 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:'*',
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            }
 
    });
 
    // Filtre projets
 
 
    $('#filtre li a').click(function(){
 
    $('#filtre li').removeClass('active');
    $(this).parent().addClass('active');
 
    filtre = $(this).attr('data-filtre');
 
    $('#folio').isotope({ 
        itemSelector: '.projet',
        layoutMode: 'masonry',
        filter:filtre,
            animationOptions: {
                duration:500,
                easing:'linear',
                queue:false
            } 
    });
 
    return false;
 
    });
 
    // LIGHTBOX
 
    $('#folio a').lightBox();
 
});

Je vous remercie pour votre aide,

**NoSmoking** · 19/01/2016, 19h46

Bonjour,
pourquoi rajouter tes effets CSS, la librairie s'en charge très bien ?

Teste l'exemple que j'avais mis dans cette discussion.

**cleo57** · 19/01/2016, 20h31

Bonsoir et merci pour ta réponse,
Oui ton exemple marche très bien, mais je ne comprends pas ce que je dois changer dans mon code pour que ça marche aussi. Si je supprime le CSS le problème persiste...
Je n'arrive pas à comprendre quelles lignes je dois rajouter dans mon fichier .JS ?

**NoSmoking** · 21/01/2016, 19h10

Dans ton code

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
 $(function() {
     // Isotope projets folio
     $('#folio').isotope({
         itemSelector: '.projet',
         layoutMode: 'masonry',
         filter: '*',
         animationOptions: {
             duration: 500,
             easing: 'linear',
             queue: false
         }
     });
     // Filtre projets
     $('#filtre li a').click(function() {
         $('#filtre li').removeClass('active');
         $(this).parent().addClass('active');
         filtre = $(this).attr('data-filtre');
        // COMME UN AIR DE DEJA VU //
         $('#folio').isotope({
             itemSelector: '.projet',
             layoutMode: 'masonry',
             filter: filtre,
             animationOptions: {
                 duration: 500,
                 easing: 'linear',
                 queue: false
             }
         });
         return false;
     });
     // LIGHTBOX
     $('#folio a').lightBox();
 });

commence par supprimer les doublons

**cleo57** · 21/01/2016, 22h43

Bonsoir,

Si je supprime le doublon l'effet de filtre ne se fait plus et si je supprime "Isotope projets folio" mon problème reste identique...

Je suis désolée mais je suis débutante en Jquery...

Merci pour ton aide

**NoSmoking** · 23/01/2016, 19h07

Je ne parlais pas de tout supprimer mais de ne remettre à jour que le filtre, cela pourrait donner le code suivant revu et légèrement corrigé

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
  $('#filtre li a').on('click', function(ev) {
      // supprime action par défaut
      ev.preventDefault();
      // élément recevant l'action
      var $this = $( ev.target);
 
      // supprime la classe sur élément en cours
      $('#filtre .active').removeClass('active');
//      $('#filtre li').removeClass('active');
 
      // ajoute la classe à l'élément cliqué
      $this.parent().addClass('active');
//      $(this).parent().addClass('active');         
 
      // récupération filtre à appliquer
      var filtre = $this.attr('data-filtre');     
//      filtre = $(this).attr('data-filtre');               
 
      // applique nouveau filtre
      $('#folio').isotope({ filter: filtre });      
//         $('#folio').isotope({
  });

Remarque : tu n'es pas obligé de mettre des <a> dans tes <li>.

Edit (24.01.2016) : $('#filtre li a').on('click', function() { devient $('#filtre li a').on('click', function( ev) {

Plugin Isotope, transition avec chrome et safari

jQuery

Vue hybride

Discussions similaires

Partager

Partager