Progress Bar Html5-过渡不起作用-Firefox

问题描述 投票:0回答:1

有人可以帮我吗?我有一个进度条(HTML5),还有一些CSS转换。

但是该转换不适用于Mozilla,仅适用于Google Chrome。

        window.onload = function(){ 

            //Id único do cliente;
            const taxvat = 1; //Valor mocado   ->   real: ..value, val(), innerText ... 
            customerIdentifier(taxvat);

            //Função responsável pela triagem dos clientes.
            function customerIdentifier(taxvat){
                switch(taxvat){
                    case 1:
                        var categoriesClient = [
                            {
                                date: 'Janeiro',
                                categories: [
                                    {
                                        nameCategory: 'Água', // Nome do produto
                                        currentValue: '1000',      // Valor Atual
                                        targetValue: '2000'        // Meta
                                    }
                                ]
                            },
                            {
                              date: 'Fevereiro',
                              categories: [{
                                nameCategory: 'Suco',
                                currentValue: '1548',
                                targetValue: '9000'
                              }]
                            },
                          {
                              date: 'Março',
                              categories: [{
                                nameCategory: 'Cerveja',
                                currentValue: '5000',
                                targetValue: '6000'
                              }]
                            }
                        ];

                        selectGenerator(categoriesClient);
                        break;
                    
                    default:
                        console.warn('None client ID detected!');
                }
            }

            //Função responsável por gerar todos os gráficos primários
            function selectGenerator(categories){
                
                var rootElement = document.getElementById('root-graphs');

                var selectPeriod = document.createElement('select');
                selectPeriod.setAttribute('id', 'planning-period');
                rootElement.appendChild(selectPeriod);

                for(var i = 0; i < categories.length; i++){
                    var optionPeriod = document.createElement('option');
                    optionPeriod.setAttribute('value', categories[i]['date']);
                    optionPeriod.classList.add('planning-option');

                    var textPeriod = document.createTextNode(categories[i]['date']);
                    optionPeriod.appendChild(textPeriod);

                    document.getElementById('planning-period').appendChild(optionPeriod);
                }

                listenerEventOption(categories);
            }

            //Função responsável por monitorar eventos de mudanças no select
            function listenerEventOption(categories){
                var planningOptions = document.getElementById('planning-period');

                planningOptions.addEventListener('change', function(event){
                    categoriesGraphGenerator(categories, event.target.value);
                });

                starterGraphs(categories);
            }

            //Função responsável por gerar os gráficos das categorias
            function categoriesGraphGenerator(categories, date){
                var rootElement = document.getElementById('root-graphs'); 
                var sectionCategoryGraphs = document.createElement('article');
                var graphCategory = document.getElementsByClassName('graph-categories');

                sectionCategoryGraphs.classList.add('graph-categories');

                if(graphCategory.length){
                    for(var i = 0; i < graphCategory.length; i++){
                        graphCategory[i].remove();
                    };
                }

                rootElement.appendChild(sectionCategoryGraphs);    

                for(var i = 0; i < categories.length; i++){
                    if(categories[i]['date'] === date){
                        var graphs = categories[i]['categories'];
                        break;
                    }
                }

                for(var i = 0; i < graphs.length; i++){
                    var containerProgressBar = document.createElement('div');
                    var circleProgressBar = document.createElement('div');
                    var progressBar = document.createElement('progress');
                    var currentValue = document.createElement('div');
                    var nameCategoryProgressBar = document.createElement('div');

                    containerProgressBar.classList.add('individual-container-progressbar');
                    nameCategoryProgressBar.classList.add('name-category-progress-bar');
                    currentValue.classList.add('current-value-progress-bar');
                    circleProgressBar.classList.add('circle-progress-bar');
                    progressBar.classList.add('progressbar-category');

                    progressBar.setAttribute('value', 0);
                    progressBar.setAttribute('max', 100);
                    progressBar.setAttribute('style', 'background-color:#0b366f;');

                    nameCategoryProgressBar.innerHTML = `Volume de ${graphs[i]['nameCategory']}`;
                    circleProgressBar.innerHTML = `META <br/> ${graphs[i]['targetValue']} HL`;
                    currentValue.innerHTML = `<span>Volume atual: </span> ${graphs[i]['currentValue']} HL`;


                    containerProgressBar.appendChild(progressBar);
                    containerProgressBar.appendChild(circleProgressBar);
                    containerProgressBar.appendChild(currentValue);
                    containerProgressBar.appendChild(nameCategoryProgressBar);
                    sectionCategoryGraphs.appendChild(containerProgressBar);                    
                }

                setTimeout(function(){
                    for(var i = 0; i < graphs.length; i++){
                        const currentValue = graphs[i]['currentValue'];
                        const targetValue = graphs[i]['targetValue'];
                        const goalValue = Math.round((currentValue * 100)/targetValue);

                        document.getElementsByClassName('progressbar-category')[i].value = goalValue;
                        document.getElementsByClassName('progressbar-category')[i].classList.add('active');   
                    }
                }, 50);  
            }

            //Função responsável por iniciar os gráficos no primeiro load. 
            function starterGraphs(categories){
                var selectChildNodes = document.getElementById('root-graphs').childNodes;

                if(selectChildNodes.length === 1){

                    for(var i = 0; i < categories.length; i++){
                        categoriesGraphGenerator(categories, categories[i]['date']);
                        return true; 
                    }
                }
                return false;
            }
        }
.graph-categories{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
 }

.current-value-progress-bar{
   position: absolute;
   top: 0;
   right: 0;
}

.name-category-progress-bar{
   position: absolute;
   top: 0;
   left: 0;
}

.individual-container-progressbar{
    width: 49%;
    max-width: 428px;
    position: relative;
}

.circle-progress-bar{
    width: 140px;
    height: 140px;
    border: 2px solid #0b366f;
    background-color: #0b366f;
    border-radius: 50%;
    color: #fff;
    position: absolute;
    top: 15px;
    left: -130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.progressbar-category{
   height: 70px;
   width: 100%;
   max-width: 428px;
   margin: 50px 0;
}

progress::-webkit-progress-bar {
    background: #fff;
    border: solid 3px #0b366f;
    padding: 0;
}

progress::-webkit-progress-value {
     background: #0b366f;
     -webkit-transition : width .5s ease;
     -moz-transition : width .5s ease;
     -o-transition : width .5s ease;
     transition : width .5s ease;
}
<section id="root-graphs"></section>

请参见上面的代码,并在select内更改选项。您将看到过渡效果。但是在mozilla中,不会应用此效果。

谢谢! ;)

html progress-bar css-transitions mozilla vendor-prefix
1个回答
0
投票

我通过替换为2解决了这个问题。我使用了最里面的“宽度”,就好像它是进度值一样。现在,它可以在所有浏览器上完美运行。

尤其是我无法解决供应商前缀的问题。

© www.soinside.com 2019 - 2024. All rights reserved.