Dev Faq
2
votes

Css z-index et transformer un flash bizarre

Cliquez sur l'image dans l'extrait (agrandir la page entière) pour exécuter la transformation et regardez de plus près dans le coin inférieur droit lorsque la carte animée passe derrière, vous la verrez se chevaucher légèrement alors qu'elle ne devrait pas. Cela se produit lorsque j'applique z-index sur chaque boîte div en CSS. Si je supprime z-index , il n'y a pas de flash, mais j'ai besoin d'index z sur mes divs box. Sinon, je ne peux pas faire en sorte que la pile se comporte de la sorte lorsque je les mélange (sauf si je change l'ordre DOM que je ne veux pas). J'ai essayé avec un peu de backface-visibilité en CSS mais sans chance. Comment puis-je me débarrasser de ce flash? 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}
$('body').on('click', function() {

  var box = $('#a2')

  box.one("transitionend", function() {

    box.css("zIndex", -1).one("transitionend", function() {

    }).removeClass('t').addClass('t2')

  }).addClass('t')


})

Cela se produit dans tous les navigateurs d'après ce que je peux voir.

3 commentaires

Il n'y a pas de flash dans l'extrait de code ci-dessus.

Développez l'extrait de code en plein écran et regardez de plus près dans le coin inférieur droit lorsque la carte animée passe derrière, vous verrez qu'elle se chevauche légèrement quand elle ne le devrait pas. Au moins en chrome.

Parlez-vous du z-index ne faisant pas la transition au bon moment?

4 Réponses :

0
votes

Je pense que c'est simplement un problème d'ordre. Placez simplement le .css ("zIndex", -1) à côté du .addClass ('t') : de cette façon, le flash ne se produit pas puisque le z-index est appliqué avant la traduction arrière 

$('body').on('click', function() {
  var box = $('#a2')
  box.one("transitionend", function() {
    box.removeClass('t').addClass('t2')
  }).css("zIndex", -1).addClass('t')
})

0 commentaires
2
votes

Le correctif est en fait simple - ajoutez simplement transition-property: transform parce que est ce que vous voulez transformer em> ( transition-property: all est la valeur par défaut et z-index est également transitioned ).

Voir la démo ci-dessous: 

<div class="container">
  <div class="box"></div>
  <div></div>
  <div></div>
</div>
div {
  position: absolute;
  border: 1px solid;
}

.container div {
  width: 100px;
  height: 100px;
}

.container .box {
  background-color: cadetblue;
  z-index: 1;
  animation: stack 5s infinite linear;
}

.box + div {
  top: 10px;
  left: 10px;
  z-index: 1;
  background-color: lightblue;
}

.box + div + div {
  top: 20px;
  left: 20px;
  z-index: 2;
  background-color: aliceblue;
}

@keyframes stack {
  50% {
    z-index: 3;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>

Pourquoi le scintillement?

Notez que z-index est un entier et qu'il ne fait pas grand-chose sens de la transition - le type d'animation est entier selon MDN :

Lorsqu'elles sont animées, les valeurs du type de données sont interpolées en utilisant des étapes complètes et discrètes. Le calcul est fait comme s'ils étaient nombres réels à virgule flottante; la valeur discrète est obtenue en utilisant la fonction de plancher. La vitesse de l'interpolation est déterminée par le fonction de minutage associée à l'animation.

Voir un exemple de comment vous pouvez animer z-index:

.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
  transition-property: transform; /* added */
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}
$('body').on('click', function() {
  var box = $('#a2')
  box.one("transitionend", function() {
    box.css("zIndex", -1).removeClass('t').addClass('t2')
  }).addClass('t')
});

C'est pourquoi vous avez le scintillement dans votre animation.

0 commentaires
0
votes

Je viens de mettre à jour votre code avec la mise à jour jQuery . En fait, je déplace simplement votre script box.css ("zIndex", -1) .addClass ('t'); dans la méthode setTimeout . Essayez ceci, je pense que cela résoudra votre problème. Merci

​​

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;  
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;  
}
$('body').on('click', function() {

  var box = $('#a2')
  box.one("transitionend", function() {
    box.one("transitionend").addClass('t2');
  })
  setTimeout(function(){
    box.css("zIndex", -1).addClass('t');
  })

})

0 commentaires
0
votes

J'ai essayé d'augmenter le z-index de l'image suivante et cela fonctionne. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="box" id="a1">
  <img src="http://interactivepixel.net/tst/01.jpg" alt="" />
</div>

<div class="box" id="a2">
  <img src="http://interactivepixel.net/tst/02.jpg" alt="" />
</div>
.box {
  position: absolute;
  width: 250px;
  padding: 10px;
  background: #fff;
  box-shadow: 1px 1px 5px #484848;
  left: 0;
  top: 0;
  height: 370px;
  box-sizing: content-box;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  backface-visibility: hidden;
}

.box img {
  display: block;
  position: relative;
  backface-visibility: hidden;
  user-select: none;
}

#a1 {
  z-index: 0;
  transform: rotate(-4.5884deg);
}

#a2 {
  z-index: 1;
  transform: rotate(7deg);
}

.t {
  transform: translateX(370px) rotate(23deg) !important;
}

.t2 {
  transform: translateX(0) rotate(-7deg) !important;
}
$('body').on('click', function() {

  var box = $('#a2')
  var i=0;
  box.one("transitionend", function() {
    // increase the z-index
    $("#a1").css("zIndex", 99);
  
    box.css("zIndex", -1).one("transitionend", function() {

    }).removeClass('t').addClass('t2')

  }).addClass('t')


})

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO