文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在单元剥离后滑动块

问如何在单元剥离后滑动块
EN

Stack Overflow用户
提问于 2019-03-21 12:41:43
回答 2查看 41关注 0票数 0

我想知道是否有可能在警报消息解除时，将该块置于警报之下，使其滑动？

​

代码语言：javascript
复制
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);
  });
});
代码语言：javascript
复制
@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;
  }
}
代码语言：javascript
复制
<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>

​

javascript
jquery
html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-03-21 13:12:47

下面是一个完整的例子..。希望能帮上忙！更改主要发生在$(“#test_button”).click(函数(){)中。

​

代码语言：javascript
复制
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);
  });
});
代码语言：javascript
复制
@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; }
代码语言：javascript
复制
<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>

​

票数 1
EN

Stack Overflow用户

发布于 2019-03-21 12:57:43

您可能想要将它的高度动画化，而不是褪色#regenerateinfo .或者淡出它，然后动画它的容器的高度。这将使它下面的元素“滑动”向上。

试着做这样的事情--也许：

代码语言：javascript
复制
$('#regenerateinfo').animate({
    height: 0}, {
    duration: 500,
    complete: function() { $("#regenerateinfo").css('display','none'); }
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/55280689

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档