Apply a hidden style with WAAPI.

apply-a-hidden-style-with-waapi.markdown

Apply a hidden style with WAAPI.

A Pen by Shaw on CodePen.

License.

index.html

<div style="opacity: 0; visibility: hidden;">
  How is this box visible?
</div>

script.js

var el = document.querySelector('div');

var newStyle = {
  //transform: 'translate(150px,150px)',
  opacity: '1',
  visibility: 'visible'
}

el.animate(
    // Must be duplicated for WAAPI compatibility
  [ newStyle, newStyle ], 
  { 
    // Duration cannot be 0 so we set it to 1ms
    duration: 1,
    // Have to fill it for the style to stick
    fill: 'both'
  }
);

setTimeout(function(){
  console.log(window.getComputedStyle(el).transform);
},60) // Have to wait for a full frame to pass to see the style

style.less

html { height: 100%; display: flex; }
body { margin: auto; }


div {  
  display: block;
  background: #000;
  color: #FFF;
  box-sizing: border-box;
  padding: 15px;
  text-align: center;
  
  opacity: 0;
  visibility: hidden;
}