给 Vue 模态框组件添加过渡和动画效果
共 5014字,需浏览 11分钟
·
2021-03-14 13:28
既然我们可以完全掌控模态框的打开和关闭了,不如给它加点过渡/动画效果,让用户体验更好一些,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)实现更酷炫的效果,感兴趣的可以自己去试试,这里不详细介绍了。
本系列教程首发在Laravel学院(laravelacademy.org),你可以点击页面左下角阅读原文链接查看最新更新的教程。