Question

在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="".

想要与fadein和fadeout举杯，导入了jquery和bootstrap4.3.1.js和bootstrap4.3.1.css 下面的简单代码：

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

期望吐司会渐入渐出并等待8秒钟，然后随着渐隐而消失，但只有直接显示并消失，不会渐入渐出。

Answer 1

尝试将var clipboard = new ClipboardJS('#btn');行保持在setTimeout中。

我也将过渡时间从默认的0.15s增加到0.5s，以正确显示过渡效果。

$("#errortip").toast('show')

setTimeout(() => {
  $("#errortip").toast('show')
}, 0)

.fade {
      transition: opacity 0.5s linear !important;
}

Answer 2

已解决，这是一个引导错误

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

引导中的动画

2 个答案: