title: How to slide block after element disapear
body: <p>I would like to know if it's possible to make the block under the alert to make it slide when the alert message disapear ?</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>function animateCSS(element, animationName, callback) {
      const node = document.querySelector(element)
      node.classList.add('animated', animationName)
      function handleAnimationEnd() {
          node.classList.remove('animated', animationName)
          node.removeEventListener('animationend', handleAnimationEnd)
          if (typeof callback === 'function') callback()
      }
      node.addEventListener('animationend', handleAnimationEnd)
  }
  $( document ).ready(function() {
    $("#test_button").click(function(){
        $("#regenerateinfo").css('display','block');
        animateCSS("#regenerateinfo", "fadeIn", function(){
            $("#regenerateinfo").removeClass('animated fadeIn');
        });
        setTimeout(function(){ 
          animateCSS("#regenerateinfo", "fadeOut", function(){
              $("#regenerateinfo").removeClass('animated fadeOut');
              $("#regenerateinfo").css('display','none');
          });
        }, 3000);
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@charset "UTF-8";
  
  @-webkit-keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
  
    to {
      opacity: 1;
    }
  }
  
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
  }
  
  
  @-webkit-keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
  
    to {
      opacity: 0;
    }
  }
  
  .fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
  }
  
  
  
  .animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  
  .animated.infinite {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
  
  .animated.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
  }
  
  .animated.delay-2s {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
  }
  
  .animated.delay-3s {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
  }
  
  .animated.delay-4s {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
  }
  
  .animated.delay-5s {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
  }
  
  .animated.fast {
    -webkit-animation-duration: 800ms;
    animation-duration: 800ms;
  }
  
  .animated.faster {
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
  }
  
  .animated.slow {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
  }
  
  .animated.slower {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
  }
  
  @media (print), (prefers-reduced-motion) {
    .animated {
      -webkit-animation: unset !important;
      animation: unset !important;
      -webkit-transition: none !important;
      transition: none !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-md-12 text-center"&gt;
  &lt;div class="row clearfix"&gt;
     &lt;div class="col-xs-12"&gt;
        &lt;ul class="nav nav-tabs nav-tabs-overflow"&gt;
           &lt;li class="dropdown pull-right tabdrop hide"&gt;
              &lt;a class="dropdown-toggle" data-toggle="dropdown" href="#"&gt;
              &lt;i class="icon-align-justify"&gt;&lt;/i&gt;
              &lt;b class="caret"&gt;&lt;/b&gt;
              &lt;/a&gt;
           &lt;/li&gt;
           &lt;li class="active"&gt;
              &lt;a href="#additionalinfo" data-toggle="tab" aria-expanded="true"&gt;
              &lt;i class="fas fa-user-lock fa-fw"&gt;&lt;/i&gt;
              &lt;span class="hidden-xs"&gt;VPN&lt;/span&gt;
              &lt;/a&gt;
           &lt;/li&gt;
           &lt;li id="localisation_tab" class=""&gt;
              &lt;a href="#localisation" data-toggle="tab" aria-expanded="false"&gt;
              &lt;i class="fas fa-globe fa-fw"&gt;&lt;/i&gt;
              &lt;span class="hidden-xs"&gt;Localisation&lt;/span&gt;
              &lt;/a&gt;
           &lt;/li&gt;
           &lt;a href="#abonnement" data-toggle="tab"&gt;
           &lt;i class="fas fa-info fa-fw"&gt;&lt;/i&gt;
           &lt;span class="hidden-xs"&gt;Info&lt;/span&gt;
           &lt;/a&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="tab-content product-details-tab-container"&gt;
  &lt;div class="tab-pane fade text-center active in" id="additionalinfo"&gt;
     &lt;div style="display: none;" id="regenerateinfo" class="alert alert-info"&gt;
        &lt;i class="fa fa-spinner fa-spin"&gt;&lt;/i&gt;
        SOME INFO TEXT
     &lt;/div&gt;
     &lt;div class="row"&gt;
        &lt;div class="col-md-6"&gt;
        &lt;div style="background-color:#00cec9; width:100%; height: 100px;"&gt;&lt;/div&gt;
           &lt;h4&gt;SOME TEXT&lt;/h4&gt;
           &lt;div id="action_loader"&gt;
              &lt;div id="formregenarate_div" style="margin-top: 10px; display: block;" class="row"&gt;
                 &lt;div class="col-md-6"&gt;
                    &lt;button id="test_button" class="btn block" value="BUTTON"&gt;
                    Click me
                    &lt;/button&gt;
                 &lt;/div&gt;
              &lt;/div&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>