Question

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

例如，您是否延迟在下面的示例中显示Link 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>

Answer 1

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

如果您只想延迟一点，请在transition-delay:课程上使用.collapsing。例如，这是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

Answer 2

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

＆＃13;

$('[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);

      })

＆＃13;

<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>

＆＃13;

Answer 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)
})

延迟显示Bootstrap崩溃？

3 个答案: