https://github.com/vueui/transitions

Use Semantic-UI transitions as v-transition in Vue.js
https://github.com/vueui/transitions

Last synced: about 1 month ago
JSON representation

Use Semantic-UI transitions as v-transition in Vue.js

• Host: GitHub
• URL: https://github.com/vueui/transitions
• Owner: vueui
• License: mit
• Created: 2014-12-18T01:13:37.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2014-12-18T01:37:29.000Z (almost 10 years ago)
• Last Synced: 2024-08-02T06:12:41.613Z (4 months ago)
• Language: JavaScript
• Size: 125 KB
• Stars: 14
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-semantic-ui - Transitions - UI transitions as v-transition in Vue.js. (Frontend)

README

        
vueui-transitions ```v0.1.0```

================================

Use Semantic-UI transitions as v-transition in Vue.js

### Installation

```bash

npm install --save vueui-transitions

```

### Usage

```js

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:

```html



    
Welcome to the home page



```


### 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](/example) for a full example with more animations and Webpack as the build tool.