在 Bootstrap 中延迟显示崩溃？答案

【问题标题】：Delay showing of collapse in Bootstrap?在 Bootstrap 中延迟显示崩溃？
【发布时间】：2017-10-26 16:50:31
【问题描述】：

如何在 Bootstrap 4 中延迟显示折叠元素？

例如，您是否延迟显示下面示例中链接 href 按钮的内容？

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>

<div class="collapse" id="collapseExample">
    <div class="card card-block">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus          richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes          anderson cred nesciunt sapiente ea proident.
    < div>
</div>

【问题讨论】：

标签： javascript twitter-bootstrap css-transitions delay bootstrap-4

【解决方案1】：

在我的解决方案中，您可以在触发器元素上使用 data-delayed-toggle 和 data-delay 属性来配置您的折叠行为：

$('[data-delayed-toggle="collapse"]').on('click', function(e) {

      var delay = $(this).data('delay') || 1000;
      var $target = $($(this).attr("href"));

      window.setTimeout(function() {
        
        if ($target.hasClass('show'))
            $target.collapse('hide');
         else
            $target.collapse('show');
          }, delay);

      })

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

<p>
  <a class="btn btn-primary" data-delayed-toggle="collapse" href="#collapseExample" data-delay="300">
    Link with href
  </a>
  <div class="collapse" id="collapseExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      < div>
    </div>

【讨论】：

【解决方案2】：

动画是通过 CSS 完成的，CSS 类是使用 jQuery 切换的。

如果您只是想稍微延迟一下，请在 .collapsing 类上使用 transition-delay:。例如，这里是 2 秒。

.collapsing {
    -webkit-transition-delay: 2s;
    transition-delay: 2s;
    visibility: hidden;
}

但过了一会儿，Bootstrap 的 JS 将启动并将 .show 类应用于元素。因此，为了进一步延迟可见性，您还可以添加延迟 .collapse.show...

.collapse.show {
    -webkit-transition-delay: 3s;
    transition-delay: 3s;
    visibility: visible;
}

https://www.codeply.com/go/ZbrrAueeLV

【讨论】：

这会延迟打开和关闭内容，如果只有打开时延迟呢？
类似 apple.com 的东西处理折叠菜单 www.apple.com，注意按钮在打开和关闭时如何与菜单级联。
那是不同的动画，不是延迟。

【解决方案3】：

这将允许您手动或使用其他功能设置延迟，并在您准备好之前阻止转换

var delay = false,delayed=900;
$('[role="button"]') .on('click', function (e) {  
  var $this   = $(this), href
  var target  = $this.attr('data-target')
      || e.preventDefault()
      || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') //strip for ie7
  var $target = $(target)
  var data    = $target.data('bs.collapse')
  var option  = data ? 'toggle' : $this.data()
  var parent  = $this.attr('data-parent')
  var $parent = parent && $(parent)

 if(!delay){ 
  setTimeout(()=>{delay=true;  $target.collapse(option); 
  delay = false },delayed); 
  return false    
}   

if (!data || !data.transitioning) {
  if ($parent) $parent.find('[data-toggle=collapse][data-parent="' + parent + '"]').not($this).addClass('collapsed')
    $this[$target.hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
  }

  $target.collapse(option)
})

【讨论】：