recherche

Maison  >  Questions et réponses  >  le corps du texte

Le feu transitionnel de l'enfant intérieur

Il s’agit d’un exemple minimal reproductible. L'extrémité de transition du survol "bascule" se déclenche (ce que je ne veux pas) et cache le "a" prématurément.

Pour reproduire le commutateur en un clic une fois la conversion terminée.

J'ai réalisé que cela se produisait parce que la bascule était à l'intérieur d'un (je ne pouvais pas la changer). Existe-t-il un moyen d'arrêter la conversion lors du changement (sans détecter quelle conversion a eu lieu).

Cela devient trop compliqué et transitionend s'avère buggé, je préfère utiliser setTimeout (ce qui est un peu ridicule pour les transitions css).

var a = document.querySelector('.a')
a.style.display = 'block'
setTimeout(function() {
  a.classList.add('visible')
}, 50)

document.querySelector('.toggle').addEventListener('click', function() {
  console.log('click')
  a.addEventListener('transitionend', function cb(e) {

    console.log('end')
    a.style.display = 'none'

  })
  a.classList.remove('visible')

})
.a {
  position: relative;
  width: 200px;
  height: 200px;
  background: red;
  left: 200px;
  display: none;
  transition: left 1s;
}

.visible {
  left: 0;
}

.toggle {
  transition: color 0.2s;
}

.toggle:hover {
  color: #fff;
}
<div class="a">
  <div class="toggle">
    toggle
  </div>
</div>

P粉274161593P粉274161593236 Il y a quelques jours353

répondre à tous(1)je répondrai

  • P粉214176639

    P粉2141766392024-04-03 12:48:25

    L'utilisation de l'animation par images clés ne nécessite aucun JavaScript. Spécifiez simplement quel est l'état final et assurez-vous de définir le mode de remplissage sur forwards afin que l'état final ne soit pas réinitialisé.

    .a {
      display: grid;
      font: 2rem sans-serif;
      place-content: center;
      
      position: relative;
      width: 200px;
      height: 200px;
      background: red;
      
      left: 200px;
      opacity: 0;
      animation: slideIn .3s ease-in-out forwards;
    }
    
    .toggle {
      transition: color 0.2s;
    }
    
    .toggle:hover {
      color: #fff;
    }
    
    @keyframes slideIn {  
      to {
        opacity: 1;
        left: 0;
      }
    }
    toggle

    répondre
    0
  • Annulerrépondre