hilongjw / vue-progressbar

A lightweight progress bar for vue
http://hilongjw.github.io/vue-progressbar
MIT License
1.46k stars 162 forks source link

Opacity animation never plays #79

Open henrikruscon opened 5 years ago

henrikruscon commented 5 years ago

Opacity animation never plays out because width is set to 0 instantly after I set app.$Progress.finish()

Here's my VueX store axios plugin with interceptors:

import axios from 'axios'
import app from '@/main'

export default function axiosPlugin() {
    return store => {
        store.$axios = axios.create({
            baseURL: '/'
        })

        store.$axios.interceptors.request.use(request => {
            app.$Progress.start()

            return request
        })

        store.$axios.interceptors.response.use(
            response => {
                app.$Progress.finish()

                return response
            },
            error => {
                app.$Progress.fail()

                return Promise.reject(error)
            }
        )
    }
}

Here's my progressbar setup:

import Vue from 'vue'
import VueProgressBar from 'vue-progressbar'

Vue.use(VueProgressBar)

Finally my main.js:

import Vue from 'vue'
import store from '@/store'
import App from '@/components/App'

import '@/components'
import '@/plugins/progressbar'

Vue.config.productionTip = false

export default new Vue({
    store,
    ...App
})