元素消失后如何滑动块

时间：2019-03-21 12:41:43

标签： javascript jquery html css

我想知道是否有可能在警报消息消失时使警报下面的块滑动吗？

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);
  });
});
@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;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 text-center">
<div class="row clearfix">
   <div class="col-xs-12">
      <ul class="nav nav-tabs nav-tabs-overflow">
         <li class="dropdown pull-right tabdrop hide">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="icon-align-justify"></i>
            <b class="caret"></b>
            </a>
         </li>
         <li class="active">
            <a href="#additionalinfo" data-toggle="tab" aria-expanded="true">
            <i class="fas fa-user-lock fa-fw"></i>
            <span class="hidden-xs">VPN</span>
            </a>
         </li>
         <li id="localisation_tab" class="">
            <a href="#localisation" data-toggle="tab" aria-expanded="false">
            <i class="fas fa-globe fa-fw"></i>
            <span class="hidden-xs">Localisation</span>
            </a>
         </li>
         <a href="#abonnement" data-toggle="tab">
         <i class="fas fa-info fa-fw"></i>
         <span class="hidden-xs">Info</span>
         </a>
      </ul>
   </div>
</div>
<div class="tab-content product-details-tab-container">
<div class="tab-pane fade text-center active in" id="additionalinfo">
   <div style="display: none;" id="regenerateinfo" class="alert alert-info">
      <i class="fa fa-spinner fa-spin"></i>
      SOME INFO TEXT
   </div>
   <div class="row">
      <div class="col-md-6">
      <div style="background-color:#00cec9; width:100%; height: 100px;"></div>
         <h4>SOME TEXT</h4>
         <div id="action_loader">
            <div id="formregenarate_div" style="margin-top: 10px; display: block;" class="row">
               <div class="col-md-6">
                  <button id="test_button" class="btn block" value="BUTTON">
                  Click me
                  </button>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

2 个答案:

答案 0 :(得分：1)

您可能不想尝试淡化#regenerateinfo的动画 ...，也可以淡化它，然后对其容器的高度进行动画处理。这应该使它下面的元素向上“滑动”。

尝试执行以下操作：

$('#regenerateinfo').animate({
    height: 0}, {
    duration: 500,
    complete: function() { $("#regenerateinfo").css('display','none'); }
});

答案 1 :(得分：1)

这是一个完整的示例，希望对您有所帮助！ 主要是在$（“＃test_button”）。click（function（）{

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');
      $('#regenerateinfo').animate({
            height: 50}, {
            duration: 200,
            complete: function() {  }
        });
      setTimeout(function(){ 
       $('#regenerateinfo').animate({
            height: 0}, {
            duration: 200,
            complete: function() { $("#regenerateinfo").css('display','none'); }
        });
      }, 3000);
  });
});
@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;
  }
}

#regenerateinfo { height:0; display:none; }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-12 text-center">
<div class="row clearfix">
   <div class="col-xs-12">
      <ul class="nav nav-tabs nav-tabs-overflow">
         <li class="dropdown pull-right tabdrop hide">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            <i class="icon-align-justify"></i>
            <b class="caret"></b>
            </a>
         </li>
         <li class="active">
            <a href="#additionalinfo" data-toggle="tab" aria-expanded="true">
            <i class="fas fa-user-lock fa-fw"></i>
            <span class="hidden-xs">VPN</span>
            </a>
         </li>
         <li id="localisation_tab" class="">
            <a href="#localisation" data-toggle="tab" aria-expanded="false">
            <i class="fas fa-globe fa-fw"></i>
            <span class="hidden-xs">Localisation</span>
            </a>
         </li>
         <a href="#abonnement" data-toggle="tab">
         <i class="fas fa-info fa-fw"></i>
         <span class="hidden-xs">Info</span>
         </a>
      </ul>
   </div>
</div>
<div class="tab-content product-details-tab-container">
<div class="tab-pane fade text-center active in" id="additionalinfo">
   <div style="display: none;" id="regenerateinfo" class="alert alert-info">
      <i class="fa fa-spinner fa-spin"></i>
      SOME INFO TEXT
   </div>
   <div class="row">
      <div class="col-md-6">
      <div style="background-color:#00cec9; width:100%; height: 100px;"></div>
         <h4>SOME TEXT</h4>
         <div id="action_loader">
            <div id="formregenarate_div" style="margin-top: 10px; display: block;" class="row">
               <div class="col-md-6">
                  <button id="test_button" class="btn block" value="BUTTON">
                  Click me
                  </button>
               </div>
            </div>
         </div>
      </div>
   </div>
</div>

相关问题
最新问题