跳转至

在讲究用户体验的年代，如何高效的制作弹窗的动画效果

参考Vant组件库源码，借助Vue封装的transition元素，可快速为之前存在的弹窗和底部浮层添加动画。

1. 底部浮层

下图是底部浮层的示意图。

下面是核心代码，vue文件用transition包裹住你的组件：

1
2
3
<transiton name="my-fade">
  <YourComponent />
</transition>

假设你的组件下面的灰色背景层类名是tip-toc-operating-layer，内部的内容类名是tip-toc-bottom-dialog，下面是scss代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.my-fade-enter,
.my-fade-leave-to {
  .tip-toc-bottom-dialog {
    transform: translate3d(0, 100%, 0);
  }

  &amp;amp;.tip-toc-operating-layer {
    background: rgba(0,0,0,0);
  }
}

.my-fade-enter-to,
.my-fade-leave {
  .tip-toc-bottom-dialog {
    transform: translate3d(0, 0 0);
  }

  &amp;amp;.tip-toc-operating-layer {
    background: rgba(0,0,0,.7);
  }
}

.my-fade-enter-active,
.my-fade-enter-active .tip-toc-bottom-dialog,
.my-fade-enter-active.tip-toc-operating-layer {
  transition: all .3s ease-out;
}

.my-fade-leave-active ,
.my-fade-leave-active .tip-toc-bottom-dialog,
.my-fade-leave-active.tip-toc-operating-layer {
  transition: all .3s ease-in;
}
值得注意的是，vant组件库中的popup组件已经实现了这个动画，可以直接使用，但是需要改造自己的组件。

2. 弹窗

下面是弹窗动画的示意图：

下面是vue代码：

1
2
3
<transiton name="dialog-fade">
  <YourDialog />
</transition>

假设你的组件下面的灰色背景层类名是tip-toc-dialog-wrap，内部的内容类名是tip-toc-dialog，下面是scss代码：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// 背景层
.tip-toc-dialog-wrap {
  transition: all .3s ease-in;
}

// 内容
.tip-toc-dialog {
  transition: all .3s ease-in;
  transform: translate3d(-50%, -50%, 0);
}

.dialog-fade-enter .tip-toc-dialog {
  transform: translate3d(-50%, -50%, 0) scale(.7);
  opacity: 0;
}

.dialog-fade-leave-active .tip-toc-dialog {
  transform: translate3d(-50%, -50%, 0) scale(.9);
  opacity: 0;
}

.dialog-fade-enter-active .tip-toc-dialog-wrap {
  animation: dialog-fade-in .3s both ease-out;
}

.dialog-fade-leave-active .tip-toc-dialog-wrap {
  animation: dialog-fade-out .3s both ease-in;
}

@keyframes dialog-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes dialog-fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}