https://github.com/kai-oswald/vue-svg-transition
Create 2-state, SVG-powered transitions
https://github.com/kai-oswald/vue-svg-transition
svg transition vue vue-component vuejs
Last synced: 4 months ago
JSON representation
Create 2-state, SVG-powered transitions
- Host: GitHub
- URL: https://github.com/kai-oswald/vue-svg-transition
- Owner: kai-oswald
- Created: 2018-08-28T14:03:20.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-13T22:41:08.000Z (almost 3 years ago)
- Last Synced: 2024-12-09T05:36:12.253Z (12 months ago)
- Topics: svg, transition, vue, vue-component, vuejs
- Language: JavaScript
- Homepage: https://kai-oswald.github.io/vue-svg-transition/
- Size: 4.79 MB
- Stars: 143
- Watchers: 2
- Forks: 7
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
- awesome-vue - vue-svg-transition - Create 2-state, SVG-powered transitions ` 📝 a year ago` (UI Utilities [🔝](#readme))
- awesome-vue - vue-svg-transition - state, SVG-powered transitions (Components & Libraries / UI Utilities)
- awesome-vue - vue-svg-transition - state, SVG-powered transitions (UI Utilities / Animation)
README
# vue-svg-transition
> Create 2-state, SVG-powered animated icons
[Codesandbox Demo](https://codesandbox.io/s/6v20q76xwr)
inspired by [Icon Transition Generator](https://blog.nucleoapp.com/create-2-state-svg-powered-animated-icons-76ed19160a7e)
[](https://www.npmjs.com/package/vue-svg-transition)
## Quick start
```
npm install --save vue-svg-transition
```
```js
import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';
Vue.use(SvgTransition);
```
## Template Example
It is recommended to use [`vue-svg-loader`](https://www.npmjs.com/package/vue-svg-loader) so we can import our SVGs from external files.
But it's possible to use inline SVG as well.
```vue
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";
export default {
components: {
MyIcon,
MyOtherIcon
}
data() {
return {
size: {
width: 48,
height: 48
}
}
}
}
```
Trigger programmatically via `ref`
```vue
export default {
mounted() {
this.$refs.transition.performTransition();
}
}
```
## Documentation
### Props
**size**
The size of the SVG viewbox.
- type: `Object`
- default: `{ width: 32, height: 32 }`
**duration**
The duration of the transition in ms
- type: `Number`
- default: `200`
**trigger**
The action that triggers the transition. Can be `click`, `hover` or `none` (if you want to trigger it programmatically).
- type: `String`
- default: `click`
### Slots
**initial**
The SVG that will be initially displayed
**default**
The other SVG that will be transitioned to