1 | # vue2-transitions
|
2 |
|
3 | ## [Demo](https://binarcode.github.io/vue2-transitions)
|
4 | ## [Codesandbox](https://codesandbox.io/s/v80qxp7nwy)
|
5 |
|
6 | [](https://npmjs.com/package/vue2-transitions) [](https://npmjs.com/package/vue2-transitions) [](https://circleci.com/gh/cristij/vue2-transitions/tree/master)
|
7 |
|
8 | ✨ Reusable component transitions
|
9 |
|
10 | ## Why :question:
|
11 | - Brings only the code that you need.
|
12 | *Many alternative solutions import the whole animate.css library. Vue2-transitions is minimalistic and lets
|
13 | you import only the transitions that you need in your app*
|
14 |
|
15 | Each transition component has **~2kb** (non-minified js+css or **~400 bytes** gzipped) and you can import only the ones you really need.
|
16 |
|
17 | - Configurable.
|
18 | *You can configure animation enter and leave durations as well as all the props of the native Vue `transition` components through props*
|
19 |
|
20 | - Easy to use.
|
21 | *No extra classes*
|
22 |
|
23 | ## Install :coffee:
|
24 |
|
25 | ```bash
|
26 | npm i vue2-transitions
|
27 | yarn add vue2-transitions
|
28 | ```
|
29 |
|
30 | CDN: [UNPKG](https://unpkg.com/vue2-transitions/) | [jsDelivr](https://cdn.jsdelivr.net/npm/vue2-transitions/) (available as `window.Vue2Transitions`)
|
31 |
|
32 | ## Usage :rocket:
|
33 |
|
34 | ```vue
|
35 | <template>
|
36 | <fade-transition>
|
37 | <div class="box" v-show="show">
|
38 | <p>Fade transition</p>
|
39 | </div>
|
40 | </fade-transition>
|
41 | </template>
|
42 |
|
43 | <script>
|
44 | import {FadeTransition} from 'vue2-transitions'
|
45 |
|
46 | export default {
|
47 | components: {
|
48 | FadeTransition
|
49 | }
|
50 | }
|
51 | </script>
|
52 | ```
|
53 |
|
54 | ## Global usage
|
55 | ```js
|
56 | import Transitions from 'vue2-transitions'
|
57 | Vue.use(Transitions)
|
58 | ```
|
59 |
|
60 | ## List of available transitions
|
61 | - FadeTransition
|
62 | - ZoomCenterTransition
|
63 | - ZoomXTransition
|
64 | - ZoomYTransition
|
65 | - CollapseTransition
|
66 | - ScaleTransition
|
67 | - SlideXLeftTransition
|
68 | - SlideXRightTransition
|
69 | - SlideYUpTransition
|
70 | - SlideYDownTransition
|
71 |
|
72 | ## Props
|
73 | ```js
|
74 | props: {
|
75 | /**
|
76 | * Transition duration. Number for specifying the same duration for enter/leave transitions
|
77 | * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave
|
78 | */
|
79 | duration: {
|
80 | type: [Number, Object],
|
81 | default: 300
|
82 | },
|
83 | /**
|
84 | * Whether the component should be a `transition-group` component.
|
85 | */
|
86 | group: Boolean,
|
87 | /**
|
88 | * Transition tag, in case the component is a `transition-group`
|
89 | */
|
90 | tag: {
|
91 | type: String,
|
92 | default: 'span'
|
93 | },
|
94 | /**
|
95 | * Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/.
|
96 | * Can be specified with styles as well but it's shorter with this prop
|
97 | */
|
98 | origin: {
|
99 | type: String,
|
100 | default: ''
|
101 | },
|
102 | /**
|
103 | * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks
|
104 | */
|
105 | styles: {
|
106 | type: Object,
|
107 | default: () => {
|
108 | return {
|
109 | animationFillMode: 'both',
|
110 | animationTimingFunction: 'ease-out'
|
111 | }
|
112 | }
|
113 | }
|
114 | }
|
115 | ```
|
116 |
|
117 | ## Group transitions
|
118 | Each transition can be used as a `transition-group` by adding the `group` prop to one of the desired transitions.
|
119 | ```html
|
120 | <fade-transition group>
|
121 | <!--keyed children here-->
|
122 | </fade-transition>
|
123 | ```
|
124 | Gotchas/things to watch:
|
125 | 1. Elements inside `group` transitions should have `display: inline-block` or must be placed in a flex context:
|
126 | [Vue.js docs reference](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions)
|
127 | 2. Each transition has a `move` class [move class docs](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions).
|
128 | Unfortunately the duration for the move transition cannot be configured through props. By default each transition has a `move` class associated
|
129 | with `.3s` transition duration:
|
130 |
|
131 | - Zoom
|
132 | ```css
|
133 | .zoom-move{
|
134 | transition: transform .3s ease-out;
|
135 | }
|
136 | ```
|
137 | - Slide
|
138 | ```css
|
139 | .slide-move{
|
140 | transition: transform .3s ease-out;
|
141 | }
|
142 | ```
|
143 | - Scale
|
144 | ```css
|
145 | .scale-move{
|
146 | transition: transform .3s cubic-bezier(.25,.8,.50,1);
|
147 | }
|
148 | ```
|
149 | - Fade
|
150 | ```css
|
151 | .fade-move{
|
152 | transition: transform .3s ease-out;
|
153 | }
|
154 | ```
|
155 | If you want to configure the duration, just redefine the class for the transition you use with the desired duration.
|
156 |
|
157 |
|
158 | ## Contribution
|
159 |
|
160 | ### Defining a new transition
|
161 | The codebase is fairly simple and contains mostly `.vue` components. If you want to add a new transition to the collection follow these steps:
|
162 | 1. Fork the repo.
|
163 | 2. Create a new branch.
|
164 | 3. Create a new `.vue` file (together with a folder if necessary)
|
165 | 4. Define the transition.
|
166 | ```html
|
167 | <template>
|
168 | <component :is="componentType"
|
169 | v-bind="$attrs"
|
170 | v-on="hooks"
|
171 | enter-active-class="enterAnimationClassHere"
|
172 | move-class="move-class"
|
173 | leave-active-class="leaveAnimationClassHere">
|
174 | <slot></slot>
|
175 | </component>
|
176 | </template>
|
177 | <script>
|
178 | import {baseTransition} from '../mixins/index.js'
|
179 | export default {
|
180 | name: 'transition-name-here',
|
181 | mixins: [baseTransition]
|
182 | }
|
183 | </script>
|
184 | <style>
|
185 | // Your styles for animations here.
|
186 | </style>
|
187 | ```
|
188 | 5. Import the transition in `src/index.js` and place it in the `export default` object.
|
189 | 6. Add the name of the new transition (camelCase) in the `transitionOptions` array inside `example/App.vue`
|
190 |
|
191 | Besides the properties described above, you can pass in any other [Transition props or events](https://vuejs.org/v2/api/#transition)
|
192 | **Note** Overriding hooks (especially `beforeEnter` or `beforeLeave`) may cause unwanted effects.
|
193 |
|
194 | ## License
|
195 |
|
196 | MIT © [cristijora](https://github.com/cristijora)
|
197 |
|
198 | ## Special thanks to
|
199 |
|
200 | @euvl (The UI for list transitions in the demo is inspired by [vue-js-grid demo](https://github.com/euvl/vue-js-grid) )
|
201 |
|
\ | No newline at end of file |