destroyed() {
        window.clearInterval(this.timeInterval)
        this.timeInterval = null;
    },
    beforeDestroy() {
        window.clearInterval(this.timeInterval)
        this.timeInterval = null;
    },
    methods: {
        start() {
            let that = this
            

            this.timeInterval = setInterval(()=> {
                let lis = document.getElementById("creditRoll").getElementsByTagName("li")
                if(that.index < lis.length-1) {
                    that.keyframes('creditRoll'+that.index, (that.index)*28*-1, (that.index+1)*28*-1)
                    if(!document.getElementById("creditRoll")) {
                        this.$once('hook:beforeDestroy', () => {            
                            window.clearInterval(that.timeInterval)                         
                        })
                    }
                    document.getElementById("creditRoll").style = 
                    ` animation-duration: 1.7s; 
                    animation-timing-function: ease-in;
                    animation-iteration-count: 1;
                    animation-name: creditRoll${that.index} ;
                    transform: translateY(-${(that.index+1)*28}px)`;

                    that.index ++
                }
                if(that.index == lis.length-1) {
                    that.index = -1
                }
                
            },this.intervalTime)
            
        },