给 Vue 模态框组件添加过渡和动画效果
既然我们可以完全掌控模态框的打开和关闭了，不如给它加点过渡/动画效果，让用户体验更好一些，Vue 框架官方提供了组件渲染/隐藏的过渡/动画效果机制，只需要参照官方文档照猫画虎调整组件代码就好了。
一、过渡效果
淡入淡出
最简单的过渡效果就是 fade，这个和 Bootstrap 组件使用的模态框打开过渡效果是一样的，只需要在模态框外面套上 Vue 内置的 transition 组件即可，并将 name 属性设置为 fade，这是一种淡入淡出效果，对应的样式代码在 style 中设置：
<style scoped>
...
.fade-enter-active, .fade-leave-active {
transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<template>
<div class="modal-section">
<transition name="fade">
<!-- Modal -->
<div class="confirm-modal" v-show="showModal">
...
</div>
</transition>
<div class="confirm-modal-backdrop" v-show="showModal"></div>
</div>
</template>
此外，为了避免蒙层容器 div[class=confirm-modal-backdrop] 对动画效果的影响，我们将其放置到和 transition 组件同级的位置。
注：这里我们仅仅使用了 Vue 官方文档提供的过渡样式示例代码，其实可以通过更多样式进行更细腻的设置，官方文档有详细介绍，这里就不具体展开了：过渡的类名。
左右滑动
除了淡入淡出外，还可以通过左右滑动的方式设置过渡效果，对应的过渡效果名称是 slide-fade，将 transition 组件的 name 属性名调整为 slide-fade，再修改过渡样式代码如下：
<style scoped>
...
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
<template>
<div class="modal-section">
<transition name="slide-fade">
<!-- Modal -->
<div class="confirm-modal" v-show="showModal">
...
</div>
</transition>
<div class="confirm-modal-backdrop" v-show="showModal"></div>
</div>
</template>二、动画效果
放大缩小
除了上述过渡效果，还可以设置动画效果，以 Vue 官方文档提供的 bounce 为例（这是一种放大缩小的动画效果，即以渐次放大的方式打开模态框，以渐次缩小的方式关闭模态框) ，调整 ConfirmModal 组件代码如下：
<style scoped>
...
.bounce-enter-active {
animation: bounce-in .5s;
}
.bounce-leave-active {
animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
</style>
<template>
<div class="modal-section">
<transition name="bounce">
<!-- Modal -->
<div class="confirm-modal" v-show="showModal">
...
</div>
</transition>
<div class="confirm-modal-backdrop" v-show="showModal"></div>
</div>
</template>三、自定义过渡/动画效果
当然，除了 Vue 框架官方提供上面几种示例之外，你还可以自定义过渡/动画效果，只需要设置相应的 transition 组件 name 属性值，然后在样式代码中组合 name 属性值和过渡/动画类名编写对应的样式代码就好了：自定义过渡类名，设置还可以集成第三方动画库（比如 Animate.css）实现更酷炫的效果，感兴趣的可以自己去试试，这里不详细介绍了。