How to create transition/animation on bootstrap-vue modal[b-modal]

问题

I'm new to bootstrap-vue and vue. I'm trying to create a b-modal with some animation effect using Animate.css. I'm referring this Custom-Transition-Classes.

and my code is like this :

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

回答1:

It seems bootstrap Vue's modal animations are not out of the box compatible with the transition. Some easy workaround seems to be to simply manually add the animation class names on the shown ok or cancel events (https://bootstrap-vue.js.org/docs/components/modal/ see the last section), like this:

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>

来源：https://stackoverflow.com/questions/52379845/how-to-create-transition-animation-on-bootstrap-vue-modalb-modal

标签

css

typescript

Vue.js

bootstrap-vue