Background Color Transition Effect In Vue – Breathing Colors

Install & Download:

# Yarn
$ yarn add vue-breathing-colors
# NPM
$ npm install vue-breathing-colors --save

Description:

Breathing Colors is a Vue.js plugin which applies an automatic transition effect to background colors.

How to use it:

Install and import the Breathing Colors.

import Vue from 'vue';
import BreathingColors from 'vue-breathing-colors';
Vue.use(BreathingColors);

Or.

<script scr="https://unpkg.com/vue-breathing-colors@latest/dist/vue-breathing-colors.js">

Basic usage. Override an array of background colors as shown below.

<div v-breathing-colors="example"></div>

export default {
  data() {
    return {
      sample: {
        colors: ['red', 'green', 'blue'],
        interval: 3000,
        transition: {
          duration: 2000
        }
      }
    }
  }
}