如何在bootstrap-vue模态[b-modal]上创建过渡/动画 [英] How to create transition/animation on bootstrap-vue modal[b-modal]

问题描述

我是Bootstrap-Vue和Vue的新手. 我正在尝试使用 Animate.css 创建具有某些动画效果的b-modal.我指的是自定义过渡类.

我的代码是这样的:

   <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的模态动画似乎与过渡不兼容.一些简单的解决方法似乎是简单地在shown ok或cancel事件上手动添加动画类名称( 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> 

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>

解决方案

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>

这篇关于如何在bootstrap-vue模态[b-modal]上创建过渡/动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！