Как создать переход / анимацию на моде bootstrap-vue [b-modal] - PullRequest
Новая
       13

Как создать переход / анимацию на моде bootstrap-vue [b-modal]

0 голосов
/ 18 сентября 2018

Я новичок в bootstrap-vue и vue. Я пытаюсь создать b-модал с эффектом анимации, используя Animate.css . Я имею в виду 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>

1 Ответ

0 голосов
/ 18 сентября 2018

Кажется, модальные анимации начальной загрузки 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>
...