title: Animate toast using pure javascript
body: <p>I'm trying to do a stripped down version of googles toast from their material ui collection. </p>
  
  <p>I've narrowed everything down to this. </p>
  
  <p>How can I slide in and slide out the toast vertically using only plain javascript?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
    $('.trigger').click(function(){
      if ( $('.Mh0NNb').css('visibility') == 'hidden' )
        $('.Mh0NNb').css('visibility','visible');
      else
        $('.Mh0NNb').css('visibility','hidden');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.Mh0NNb {
      background-color: #323232;
      bottom: 0;
      box-sizing: border-box;
      box-shadow: 0 6px 10px 0 rgba(0,0,0,0.14),0 1px 18px 0 rgba(0,0,0,0.12),0 3px 5px -1px rgba(0,0,0,0.2);
      color: #fff;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      left: 0;
      min-height: 48px;
      position: fixed;
      right: 0;
      transform: translate(0,100%);
      visibility: hidden;
      z-index: 99999;
  }
  
  .M6tHv {
      -webkit-box-align: center;
      box-align: center;
      align-items: center;
      align-content: center;
      display: flex;
      flex-direction: row;
      min-height: inherit;
      padding: 0
  }
  
  .aGJE1b {
      box-flex: 1;
      flex-grow: 1;
      flex-shrink: 1;
      line-height: normal;
      overflow: hidden;
      padding: 14px 24px;
      text-overflow: ellipsis;
      word-break: break-word
  }
  
  .x95qze {
      align-self: center;
      color: #eeff41;
      box-flex: 0;
      flex-grow: 0;
      flex-shrink: 0;
      float: right;
      text-transform: uppercase;
      font-weight: 500;
      display: inline-block;
      cursor: pointer;
      outline: none;
      padding: 14px 24px
  }
  
  @media screen and (min-width: 481px) {
      .Mh0NNb {
          min-width:288px;
          max-width: 568px;
          border-radius: 2px
      }
  
      .Mp2Z0b {
          left: 24px;
          margin-right: 24px;
          right: auto
      }
  
      .VcC8Fc {
          left: 50%;
          right: auto;
          transform: translate(-50%,100%)
      }
  
      .Mp2Z0b.misTTe {
          bottom: 24px
      }
  
      .VcC8Fc.misTTe {
          bottom: 0;
          transform: translate(-50%,0)
      }
  
      .M6tHv {
          padding: 0
      }
  
      .aGJE1b {
          padding-right: 24px
      }
  }
  
  @media screen and (max-width: 480px) {
      .xbgI6e .aGJE1b,.xbgI6e .x95qze {
          padding-bottom:24px;
          padding-top: 24px
      }
  }
  
  @media screen and (min-width: 481px) and (max-width:568px) {
      .Mh0NNb {
          max-width:90%
      }
  }
  
  @media screen and (min-width: 569px) {
      .Mh0NNb {
          max-width:568px
      }
  }
  
  .Mh0NNb.Mh0NNb {
      background-color: #202124;
      border-radius: 4px 4px 0 0
  }
  
  .aGJE1b.aGJE1b {
      color: #bdc1c6;
      font-weight: 500;
      line-height: 1.4
  }
  
  .x95qze.x95qze {
      color: #669df6;
      text-transform: capitalize;
      font-family: 'Google Sans',Roboto,RobotoDraft,Helvetica,Arial,sans-serif
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="Mh0NNb VcC8Fc misTTe"&gt;
      &lt;div class="M6tHv"&gt;
          &lt;div class="aGJE1b"&gt;Contact details updated&lt;/div&gt;
          &lt;div class="dnmu6e" tabindex="0"&gt;&lt;/div&gt;
          &lt;div class="x95qze" role="button" tabindex="0" aria-describedby="J9Hpafc51"&gt;Undo&lt;/div&gt;
          &lt;div class="dnmu6e" tabindex="0"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;button class="trigger"&gt;Toggle Info Box!&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>