给 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）实现更酷炫的效果，感兴趣的可以自己去试试，这里不详细介绍了。