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