1 | <template>
|
2 | <component :is="componentType"
|
3 | :tag="tag"
|
4 | v-bind="$attrs"
|
5 | v-on="hooks"
|
6 | enter-active-class="zoomInY"
|
7 | move-class="zoom-move"
|
8 | leave-active-class="zoomOutY">
|
9 | <slot></slot>
|
10 | </component>
|
11 | </template>
|
12 | <script>
|
13 | import {baseTransition} from '../mixins/index.js'
|
14 |
|
15 | export default {
|
16 | name: 'zoom-y-transition',
|
17 | mixins: [baseTransition],
|
18 | props: {
|
19 | styles: {
|
20 | type: Object,
|
21 | default: () => {
|
22 | return {
|
23 | animationFillMode: 'both',
|
24 | animationTimingFunction: 'cubic-bezier(.55,0,.1,1)'
|
25 | }
|
26 | }
|
27 | }
|
28 | },
|
29 | }
|
30 | </script>
|
31 | <style lang="scss">
|
32 | @import "move";
|
33 |
|
34 | @keyframes zoomInY {
|
35 | from {
|
36 | opacity: 0;
|
37 | transform: scaleY(0);
|
38 | }
|
39 |
|
40 | 50% {
|
41 | opacity: 1;
|
42 | tranform: scaleY(1)
|
43 | }
|
44 | }
|
45 |
|
46 | .zoomInY {
|
47 | animation-name: zoomInY;
|
48 | }
|
49 |
|
50 | @keyframes zoomOutY {
|
51 | from {
|
52 | opacity: 1;
|
53 | }
|
54 |
|
55 | 50% {
|
56 | opacity: 0;
|
57 | transform: scaleY(0);
|
58 | }
|
59 |
|
60 | to {
|
61 | opacity: 0;
|
62 | }
|
63 | }
|
64 |
|
65 | .zoomOutY {
|
66 | animation-name: zoomOutY;
|
67 | }
|
68 | </style>
|