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