J'ai un élément de message que j'ajouterai à ma page dans une fonction: et i ajoutez les propriétés CSS: p> Je dois réécrire le code, mettre le changement de style dans le SettimeOut et ajouter un paramètre supplémentaire pour l'élimination de l'élément: P> const markup = `
<div class="todolist__message todolist__message${status? "--ok":"--err"}">${msg}</div>
`;
elements.tdl.insertAdjacentHTML('beforeend', markup);
if(fade) {
setTimeout(() => {
const message = document.querySelector('.todolist__message');
// Change the message opacity
message.style.opacity = '0';
// Remove the message
setTimeout(() => document.querySelector('.todolist__message').parentElement.removeChild(message), 2000);
}, 2000);
}
3 Réponses :
Ceci fonctionne:
p>
<div id="wrapper"></div> <button id="btn">delete</button>
Oui, c'est le premier exemple de code qui ne fonctionne pas, celui sans les deux Settimeouts :)
@Nickw Je pense que le problème est que vous ajoutez et que vous enlevez instantanément, il y a des choses en JS liées à CSS lorsque vous devez exécuter SETTimeOut (0) de sorte que le code exécuter dans la prochaine boucle d'événement car CSS met à jour dans la boucle d'événement JS .
Hmm, je veux dire qu'il est bon de savoir que je n'ai rien manqué trop évident, et vous avez probablement raison - mais je me débats pour voir comment votre code est vraiment différent, aura une pièce de théâtre avec cela, merci
@NickW dans mon code Le Supprimer est en cas d'événement de clic afin que ce ne soit pas en même temps que dans votre code. Si vous ajoutez SettimeOut (0) à votre code, cela devrait fonctionner, à cause de la boucle d'événement. Regardez cette vidéo Jake Archibald: dans la boucle - JSCONF.ASIA
Le problème est que vous essayez d'appliquer opacité: 0 en même temps, vous appliquez la transition.
À transition fonctionner; Vous devez d'abord ajouter la classe de transition et ajouter opacité à l'intérieur de Settimeout.
Voulez-vous dire parce que je crée la classe elle-même à presque la même période que d'appliquer l'opacité? La transition est techniquement déjà appliquée avant que l'opacité ne soit réglée à zéro car elle est dans le CSS pour l'élément (ainsi que l'opacité: 1)
C'est la même chose. Création d'un nouvel élément ou d'ajout de «classe» ayant transition propriété.
Pour toute personne intéressée, le second délai d'attente et le retrait de l'élément doivent être remplacés par un écouteur d'événement transitionend sur l'élément, qui appelle une méthode qui supprime l'élément une fois que l'animation est terminée, plutôt que de synchroniser les installations avec l'animation Délai + Durée:
whichTransitionEvent() {
let t;
const el = document.createElement('fake-element');
const transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
for(t in transitions) {
if(el.style[t] !== undefined)
return transitions[t];
}
}
Essayez avec l'ajout de cours au lieu de mettre à jour le style.
Ouais, Cheers, c'est probablement mieux que les fuseaux 2x, mais toujours intéressé par la raison pour laquelle ce qui précède ne fonctionne pas comme je m'attends?
Votre code travaille, voyez ma réponse. PS: Où avez-vous mis cette règle transition , pouvez-vous afficher votre CSS avec sélecteur?