Twitter bootstrap 如何在Vue中显示引导模式窗体的转换？

在Vue中显示引导模式窗体时，我不知道如何进行简单的淡入/淡出转换。我可以让表单正确显示，但它只是突然出现。我做错了什么？非常感谢。已经为此浪费了一个小时：-~

<div id=app>

<button type="button" class="btn btn-primary" @click="showModal=true" >
  Launch demo modal
</button>


 <div v-if="showModal">
    <transition name="modal" >
      <div class="modal-mask">
        <div class="modal-wrapper">

        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" @click="showModal = false">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <input type="text" class="form-control-plaintext" placeholder="Type text here...">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" @click="showModal = false">Close</button>
                    <button type="button" class="btn btn-primary" @click="showModal = false">Save changes</button>
                </div>
            </div>
        </div>

        </div>
      </div>
    </transition>
  </div>

</div> <!--Vue-->



new Vue({
  el: "#app",

  data: {
    message:'Vue is working',
        showModal:false

  },

  methods: {

  }
})

启动演示模式
情态标题
&时代；
接近
保存更改
新Vue({
el:“应用程序”，
数据：{
消息：“Vue正在工作”，
showModal:错误
},
方法：{
}
})

---

请参阅Fiddle:

首先，您需要使用

v-if

将元素包装到

（）。 然后，您必须在CSS中定义

还要注意，

data

字段应该是返回对象的函数，而不是对象

定义组件时，

数据

必须声明为 返回初始的

数据

对象，因为将有许多实例 使用相同的定义创建。如果我们使用普通对象作为数据， 同一对象将通过引用在所有实例中共享 创建！通过提供

data

函数，每次创建新实例时 我们可以调用它来返回初始

数据的新副本


newvue({
el:“应用程序”，
数据（）{
返回{
消息：“Vue正在工作”，
showModal:错误
}
}
});
。模式输入激活，
.调休有效{
转变：不透明度。5s；
}
.模态输入，
.模态假{
不透明度：0；
}

Vue+Bootstrap+Typescript+FontAwesome（和Console.js）

引导消息：{{message}

启动演示模式
情态标题
&时代；
接近
保存更改