如何在 bootstrap-vue modal[b-modal] 上创建过渡/动画

Posted 2023-02-22

【中文标题】如何在 bootstrap-vue modal[b-modal] 上创建过渡/动画

【英文标题】：How to create transition/animation on bootstrap-vue modal[b-modal]

【发布时间】：2019-02-22 02:13:37

【问题描述】：

我是 bootstrap-vue 和 vue 的新手。 我正在尝试使用Animate.css 创建具有一些动画效果的 b 模态。我指的是Custom-Transition-Classes。

我的代码是这样的：

   <transition name="modal1" enter-active-class="animated slideInLeft" leave- 
   active-class="animated slideOutLeft">
   <b-modal ref="saveModal" transition id="modal1" title="Save" 
   @ok="handleOk" @cancel="handleCancel">
   <p class="my-4">Are you sure, you want to save?.</p>
   </b-modal>
   </transition>

【问题讨论】：

问题到底是什么？

抱歉问题不完整，我只是想创建动画效果bootstrap-vue modal

bootstrap vue 模态已经有一个打开动画（从顶部飞入并淡入）。在添加自己的动画之前，您是否尝试过先禁用 no-fade 的那些？ bootstrap-vue.js.org/docs/components/modal

【参考方案1】：

似乎 bootstrap Vue 的模态动画与过渡不兼容。一些简单的解决方法似乎是简单地在shown ok 或cancel 事件上手动添加动画类名称（https://bootstrap-vue.js.org/docs/components/modal/ 见最后一节），如下所示：

https://jsfiddle.net/Sirence/g8w2d413/33/

methods: 
   shown: function()
    let modal = document.getElementById('modal1');
    modal.parentElement.parentElement.classList.remove('hidden');
    modal.classList.add('slideInLeft');
    modal.classList.add('animated');
  ,
  hidden: function(evt) 
   let modal = document.getElementById('modal1');
   evt.preventDefault();
   modal.classList.add('slideOutLeft');
    setTimeout(() => 
      this.$refs.myModalRef.hide();
      modal.parentElement.parentElement.classList.add('hidden');
      console.log('test');
    , 1000)
  

.hidden 
  display: none;

<b-btn v-b-modal.modal1>Launch demo modal</b-btn>

<b-modal ref="myModalRef" id="modal1" title="Bootstrap-Vue" @shown="shown" no-fade class="hidden" @ok="hidden" @cancel="hidden">
  <p class="my-4">Hello from modal!</p>
</b-modal>

【讨论】：

太棒了，感谢您的时间和支持。这真的是一个很大的帮助。我刚刚将您的解决方案转换为 typescript，因为我正在将 typescript 与 vue-class-decorator 和 vue-property-decorator 一起使用，并且效果非常好。