javascript - Delay showing of collapse in Bootstrap? - Stack Overflow

admin管理员组

文章数量:1401634

How do you delay showing of collapsed elements in Bootstrap 4?

For example ho do you delay showing content of Link href button in the example below?

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

How do you delay showing of collapsed elements in Bootstrap 4?

For example ho do you delay showing content of Link href button in the example below?

<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

Share Improve this question Follow edited May 28, 2017 at 15:40 HDJEMAI 9,8204848 gold badges7676 silver badges9898 bronze badges asked May 25, 2017 at 22:15 DjangoUrlDjangoUrl 5711 gold badge11 silver badge77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

In my solution you can use data-delayed-toggle and data-delay attributes on the trigger element to configure your collapse behaviour:

$('[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./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./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>

The animation is done via CSS, and the CSS classes are switched using jQuery.

If you just want to delay it a little, use transition-delay: on the .collapsing class. For example, here is 2 seconds.

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

But after a while Bootstrap's JS will kick in and apply the .show class to the element. So, to further delay the visibility you can also add a delay .collapse.show...

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

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

This will allow you to set a delay manually or with another function as well as prevent transition till you are ready

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

本文标签： javascriptDelay showing of collapse in BootstrapStack Overflow