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