CODEWITHSUNDEEP
javascripthtmltwitter-bootstrap
Jason117
Jason117

Reputation: 107

toasts animation in bootstrap

across the https://getbootstrap.com/docs/4.3/components/toasts/

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-animation="".

want to have a toasts with fadein and fadeout,imported jquery and bootstrap4.3.1.js and bootstrap4.3.1.css so simple code below:

<script>$("#errortip").toast('show')</script>
<div id="errortip" role="alert" aria-live="assertive" aria-atomic="true" class="toast" ** data-animation="true" ** data-autohide="true" data-delay="8000" style="position: absolute; top: 0; right: 0;">
  <div class="toast-header">
    <img src="error.svg" class="rounded mr-2" alt="...">
    <strong class="mr-auto text-danger">Error</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    error
  </div>
</div>

expect a toasts showed with fade in and waitting for 8s then disappear with fade out,but there only direct show and disappear,no fade in and fade out.

Upvotes: 3

Views: 11622

Answers (2)

Jason117
Jason117

Reputation: 107

Solved,this is a bootstrap bug

https://github.com/twbs/bootstrap/issues/28987

Upvotes: 0

Nandita Sharma
Nandita Sharma

Reputation: 13407

Try keeping the line $("#errortip").toast('show') in a setTimeout.

Also I increased the transition-duration to 0.5s from its default 0.15s, to show the transition effect properly.

setTimeout(() => {
  $("#errortip").toast('show')
}, 0)
.fade {
      transition: opacity 0.5s linear !important;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


<div id="errortip" role="alert" aria-live="assertive" aria-atomic="true" class="toast" ** data-animation="true" ** data-autohide="true" data-delay="5000" style="position: absolute; top: 0; left: 0;">
  <div class="toast-header">
    <img src="https://picsum.photos/20" class="rounded mr-2" alt="...">
    <strong class="mr-auto text-danger">Error</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
  </div>
  <div class="toast-body">
    error
  </div>
</div>

Upvotes: 4

Related Questions