Background Color Transition Effect In Vue – Breathing Colors

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/[email protected]/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
        }
      }
    }
  }
}

Download Details:

Author: mycurelabs

Live Demo: /demo/background-color-transition

Download Link: https://github.com/mycurelabs/vue-breathing-colors/archive/master.zip

Official Website: https://github.com/mycurelabs/vue-breathing-colors

Last Update: September 3, 2019

Install:

# Yarn
$ yarn add vue-breathing-colors

# NPM
$ npm install vue-breathing-colors --save

You Might Be Interested In:

Add Comment