title: How to make CSS fade out but the HTML to collapse
body: <p>I have an element, which has its css style controlled by javascript, simply by adding/removing classes.</p>
  
  <p>For example, I have a hide class, which I apply to an element when I want it to hide, and when the element is hidden the page restructures as if the content was never there (collapse). This is great.</p>
  
  <p>I now want the item to fade out first, and then collapse but I'm lost.</p>
  
  <p>My effort is</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> document.getElementById("clicky").addEventListener("click", changeMe);
  
  function changeMe() {
   var ele = document.getElementById("item");   
      ele.className= "hide";
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#clicky{cursor:pointer;}
  
  .hide { 
   
      animation: fadeout 1s ;
   -webkit-animation: fadeout 1s ; /* Chrome, Safari, Opera */
   animation-fill-mode: forwards;
   -webkit-animation-fill-mode: forwards; 
   }
  
  /* Chrome, Safari, Opera */
  @-webkit-keyframes fadeout {
      from {
   display:block;
   visibility:visible;
      opacity: 1;}
      to {
   display:none;
   visibility:hidden;
      opacity:0;}
   
  }
  
  /* Standard syntax */
  @keyframes fadeout {
      from {
   display:block;
   visibility:visible;
      opacity: 1;}
      to {
   display:none;
   visibility:hidden;
      opacity:0;}
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a id="clicky"&gt;Click me&lt;/a&gt;
  &lt;br /&gt;&lt;br /&gt;
  
  &lt;div&gt;I remaine!&lt;/div&gt;
  &lt;div id="item"&gt;I should go bye byes but also collapse so the page can re-organise when I disapear!!!!!&lt;/div&gt;
  &lt;div&gt;I should stay forever but move physically up the page when the line above disappears!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>