title: MutationObserver to know whenever style is calculated and rendererd in HTML
body: <p>So Im creating something where I need to be able to transform some elements with and without transition.</p>
  <p>Lets say that i have to transform something without transition, then i ofcourse firstly remove the transition parameter (if there's any) from the element, whenever i know the transition styling is gone i would like to transform the element. And maybe after that i would like to transform the element again, but this time with some transition. So first, I add the transition, and whenever thats ready i transform the element.</p>
  <p>I've created a function &quot;setStyle&quot; which is supposed handle the style setting for a given element, and then resolve whenever that style is actually added to the view. I've tried to do so with the help of the MutationObserver. But ive clearly misunderstood something about this, or the use case of MutationObserver.</p>
  <p>I've created a simple CodePen with the function &quot;setStyle&quot; where i demonstrate that i first use the function to set a transform style attribute, and since there's no transition attribute added just yet, this shouldnt be transitioned. After ive added the transform attribute i add the transtition attribute, but in this code example it looks like the two attributes are applied at the very same time.</p>
  <p>Why do i not just use &quot;setTimeout&quot;? &quot;setTimeout&quot; is not garuanteed, I would like to do something that work with any web API.</p>
  <p><a href="https://codepen.io/herman-jansson/pen/NWNKWXL" rel="nofollow noreferrer">https://codepen.io/herman-jansson/pen/NWNKWXL</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;button id=&quot;start&quot;&gt;Start&lt;/button&gt;
  &lt;div id=&quot;div&quot;&gt;
  
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>var elem = document.getElementById('div');
  
  var setStyle = (element, style, value) =&gt; {
      return new Promise(resolve =&gt; {
        const observer = new MutationObserver((mutations) =&gt; {
          if(
            document.contains(element) 
            &amp;&amp; 
            mutations.some((mutation) =&gt; !!mutation.attributeName)
          ) {
            // style should be added here, but most likely not calculated since 
            // its not working
            observer.disconnect();
            resolve();
          }
        })
         observer.observe(element, { attributes: true, attributeFilter: [&quot;style&quot;]});
         element.style[style] = value;
      });
  }
  
  
  document.getElementById('reset').addEventListener('click', () =&gt; {
      setStyle(elem, 'transform', 'translateX(-50%)').then(() =&gt; {
        setStyle(elem, 'transition', 'transform 1s ease-in-out')
      });
  });
  </code></pre>