给 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 组件同级的位置。

然后就可以在浏览器文章详情页测试这个动态过渡效果了:

transition-1

注:这里我们仅仅使用了 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>

在浏览器详情页进行测试,效果如下:

transition-2

动画效果

放大缩小

除了上述过渡效果,还可以设置动画效果,以 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>

在浏览器文章详情页测试这个动画效果,渲染如下:

transition-3

自定义过渡/动画效果

当然,除了 Vue 框架官方提供上面几种示例之外,你还可以自定义过渡/动画效果,只需要设置相应的 transition 组件 name 属性值,然后在样式代码中组合 name 属性值和过渡/动画类名编写对应的样式代码就好了:自定义过渡类名,设置还可以集成第三方动画库(比如 Animate.css)实现更酷炫的效果,感兴趣的可以自己去试试,这里不详细介绍了。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 基于 Bootstrap + Vue 框架编写模态框组件并完成文章删除功能

>> 下一篇: 基于 Laravel + Vue 框架实现文件异步上传组件和文章封面图片功能