vueui-transitions
v0.1.0
Published
Use Semantic-UI transitions as v-transition in Vue.js
Downloads
32
Maintainers
Readme
vueui-transitions v0.1.0
Use Semantic-UI transitions as v-transition in Vue.js
Installation
npm install --save vueui-transitions
Usage
var Vue = require('vue');
var transitions = require('vueui-transitions');
Vue.use(transitions, {
duration: 700 // The duration of each animation, Default is 700ms
})
In your HTML you can use them like:
<div class="page" v-show="isVisible" v-transition="slide-up">
<h1>Welcome to the home page</h1>
</div>
Animations
This is the full list of all the available in-out animations:
var emphasis = [
'flash',
'shake',
'pulse',
'tada',
'bounce'
]
var appearance = [
'slide-up',
'slide-down',
'vertical-flip',
'horizontal-flip',
'fade',
'fade-up',
'fade-down',
'scale',
'drop',
'browse'
]
See the example for a full example with more animations and Webpack as the build tool.