kai-oswald / Vue Svg Transition
Create 2-state, SVG-powered transitions
Stars: ✭ 127
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Svg Transition
Macaw
Powerful and easy-to-use vector graphics Swift library with SVG support
Stars: ✭ 5,756 (+4432.28%)
Mutual labels: svg, transition
Iconpark
🍎Transform an SVG icon into multiple themes, and generate React icons,Vue icons,svg icons
Stars: ✭ 4,924 (+3777.17%)
Mutual labels: svg, vue-component
Visualizer
UI-Router state visualizer and transition visualizer
Stars: ✭ 205 (+61.42%)
Mutual labels: svg, transition
Diagram Vue
A editable SVG-based diagram component for Vue
Stars: ✭ 86 (-32.28%)
Mutual labels: svg, vue-component
Mrefresh
This pod enables you to add pull-to-refresh mechanism to your scrollviews and tableviews and use svg patterns in your refreshing view's layers.
Stars: ✭ 123 (-3.15%)
Mutual labels: svg
Mergi
go library for image programming (merge, crop, resize, watermark, animate, ease, transit)
Stars: ✭ 127 (+0%)
Mutual labels: transition
Vue Number Input
Number input component for Vue.js.
Stars: ✭ 125 (-1.57%)
Mutual labels: vue-component
Opentype Svg Font Editor
A user-friendly tool for adding SVG to OpenType fonts
Stars: ✭ 126 (-0.79%)
Mutual labels: svg
React Native Chart
[NOT MAINTAINED] 📊 Add line, area, pie, and bar charts to your React Native app
Stars: ✭ 1,574 (+1139.37%)
Mutual labels: svg
Xsound
Web Audio API Library for Synthesizer, Effects, Visualization, Multi-Track Recording, Audio Streaming, Visual Audio Sprite ...
Stars: ✭ 123 (-3.15%)
Mutual labels: svg
vue-svg-transition
Create 2-state, SVG-powered animated icons
inspired by Icon Transition Generator
Quick start
npm install --save vue-svg-transition
import Vue from 'vue';
import SvgTransition from 'vue-svg-transition';
Vue.use(SvgTransition);
Template Example
It is recommended to use vue-svg-loader
so we can import our SVGs from external files.
But it's possible to use inline SVG as well.
<template>
<svg-transition :size="size">
<MyIcon slot="initial" />
<MyOtherIcon />
</svg-transition>
</template>
<script>
import MyIcon from "./assets/MyIcon.svg";
import MyOtherIcon from "./assets/MyOtherIcon.svg";
export default {
components: {
MyIcon,
MyOtherIcon
}
data() {
return {
size: {
width: 48,
height: 48
}
}
}
}
</script>
Trigger programmatically via ref
<svg-transition ref="transition" trigger="none">
<!-- your icons -->
</svg-transition>
<script>
export default {
mounted() {
this.$refs.transition.performTransition();
}
}
</script>
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].