0
votes

Comment attendre que l'élément soit entièrement rendu pour exécuter la transition CSS?

J'ai un bouton avec un écouteur d'événement de clic qui appelle 2 fonctions différentes. La première fonction s'efface une division en ajoutant une classe qui déclenche une transition CSS vers l'opacité 0, puis l'innerhtml est modifiée, la classe est alors retirée et l'opacité s'efface à 1.

La deuxième fonction crée et IMG, ajoute À la DIV, puis ajoute une classe à l'IMG qui est une transition de l'échelle CSS. Donc, ce qu'il faut ressembler est: clic -> div des disparitions -> div finance avec un nouveau contenu -> l'image apparaît et pousse en taille.

Pour qu'il fonctionne correctement, tous ces événements avoir à se passer successivement. La seule façon dont j'ai réussi à faire fonctionner est avec Settimeouts, ce qui n'est vraiment pas le meilleur moyen. J'ai essayé des promesses, Transionendez les auditeurs d'événements, au demandaimationframe et aucun de ceux qui ne semblent fonctionner. Soit le img ne charge pas ou ne charge pas déjà à l'échelle et la transition est absente. Quelqu'un peut-il m'aider s'il vous plaît à comprendre comment configurer ces événements afin que chacun soit en attente de l'achèvement du dernier avant de déclencher? Merci!

pseudocode: xxx

javascript asynchronous transition

0 commentaires

3 Réponses :

0
votes

Vous pouvez utiliser jQuery:

$ (() => {rappel})
ou vanille js: xxx
});
voici la documentation MDN pour DomContentOached https://developer.mozilla.org/en-us/ DOCS / Web / API / Fenêtre / DOMContentLoaded_Event

0 commentaires

0
votes

'Alors, ce dont vous avez besoin ici, c'est un reflet de la page qui va forcer la mise en page.

Un moyen de faire cela iswith el.offsetwidth. Fondamentalement, ce qu'il arrive, par exemple si vous le placeriez ici: xxx

est que lorsqu'il est appelé désintélique est appelé, JavaScript est "à nouveau" pour vérifier la largeur de l'élément. À ce moment-là, même si la largeur de l'élément n'a pas changé, la première fonction fonctionne, la première animation est terminée, JavaScript vérifie maintenant pour la wridth offsetWidth, puis la deuxième animation.

Ainsi, déclarez-en, déclarez Variable que vous utilisez dans RESETDIV, peut-être le QuerySelector de la "div" et vérifie sa largeur entre les deux fonctions.

laissez-moi savoir si cela fonctionne.

1 commentaires

Je l'ai essayé et malheureusement, cela ne fonctionne pas pour moi, je reçois toujours une image déjà échelle. Je pense que cela fonctionne la transformation de l'échelle avant que l'image soit complètement chargée dans le DOM, c'est la seule explication que je puisse proposer pour le comportement. Comme je l'ai dit, cela fonctionne si je fixais un délai d'attente. Mais merci d'avoir essayé d'aider!

0
votes

Voici une suggestion basée sur votre pseudocode:

function resetDiv() {
    const div = document.querySelector('#div');
    div.classList.add('cssFadeout');

    div.ontransitionend = () => {
        div.innerHTML = `${text literal HTML stored in a variable}`;
        sky.classList.remove('fadeOut');
        // wait for the transition triggered above to end and then call the other function
        // also remove the call to generateImg() from the click-handler
        sky.ontransitionend = generateImg;
    };
}

0 commentaires