Transitions CSS : Déclencher avec JavaScript

Question

J'ai déjà posé une question sur le déclenchement d'une transition CSS avec JavaScript&. setTimeout ( JavaScript : Déclencher une transition CSS avec window.setTimeout ). Cette question vise à obtenir plus d'informations à ce sujet.

J'ai une fonction qui change le contenu et fait apparaître un paragraphe en fondu. p#test :

function test() {
    var done=false;
    var p=document.querySelector('p#test');
    window.setInterval(doit,4000);
    var data=0;

    function doit() {
        p.removeAttribute('on');    //  1
        p.offsetHeight;             //  2   force update
        p.innerHTML=data++;         //  3
        p.setAttribute('on',null);  //  4
    }
}

Le CSS est :

p#test {
    opacity: 0;
}
p#test[on] {
    transition: opacity 1s;
    opacity: 1;
}

Je note que le transition propriété doit être défini dans le p#test[on] règle . Si elle est définie pour le p#test règle, cela ne fonctionnera pas.

Je trouve que les étapes 2 & 3 ci-dessus peuvent être interchangés.

Cependant, je ne peut pas Je n'arrive pas à le faire fonctionner du tout si j'essaie de définir les propriétés uniquement en JavaScript :

function doit() {       //  DOES NOT WORK
    p.style.opacity=0;
    p.offsetHeight;
    p.innerHTML=data++;
    p.style.opacity=1;
}

Je conclus donc :

• La modification d'un attribut (ou d'une classe) en JavaScript déclenchera une transition CSS.
• La modification d'une propriété CSS en JavaScript no déclencher une transition
• La transition ne sera déclenchée que si le transition dans la règle déclenchée.

Désolé pour ce long préambule. La question est la suivante :

Précisément ce que JavaScript va effectivement déclencher une transition CSS ? Faut-il seulement changer de classe ou d'attribut, ou tout autre élément peut-il fonctionner ?

J'ai ajouté un violon ici : https://jsfiddle.net/comparity/a7qt297m/

Answer 1

Question bête, mais l'élément de base ( p#test ) possède également la propriété de transition ? Dans votre exemple de code, la propriété de transition n'est présente que pour l'état "on".

Si ce n'est pas le cas, c'est peut-être parce que vous modifiez l'opacité de 0 à 1 en succession immédiate dans la même fonction. Voyez si un petit setTimeout peut faire la différence pour la ligne opacity=1.