Как через js установить css-свойства с префиксами?

Question

[konstant1n13]

Мне через JS нужно задать css-свойства и свойство transition в том числе. Хочу добавить через JS вендорные префиксы. С использованием cssText скрипт не работает, а без них добавляется просто transition без префиксов. Как мне через JS добавить transition с префиксами?

document.addEventListener('DOMContentLoaded', () => {
    
    class MenuToggler{
        constructor(data){
            this.menuTriggerSelector = data.menuTriggerSelector;
            this.menuSelector = data.menuSelector;
            this.type = data.type || 'appear'; //type of Apperance
            
            this.menuTrigger = document.querySelector(`${this.menuTriggerSelector}`);
            this.menu = document.querySelector(`${this.menuSelector}`);
            
            this.transitionTime = data.transitionTime || '.25s';            
            this.init();
        }
        
        init(){
            if (this.type == 'appear'){
                // add first styles, makes elem invisible and untouchuble
                
                this.menu.style.height = '0px';
                this.menu.style.opacity = '0';
                this.menu.style.transition = `opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
                this.menu.style.cssText = `-webkit-transition: opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
                this.menu.style.cssText = `-o-transition: opacity ${this.transitionTime} linear ${this.transitionTime}, height 0s linear 0s`;
            }
        }
    }
    
    const menuToggler1 = new MenuToggler({
        menuTriggerSelector: '.burger',
        menuSelector: '.links-wrapper'
    });
    
});

Answer 1

[Андрей Хохлов]

this.menu.style.webkitTransition

https://stackoverflow.com/questions/8889014/settin...

Comments

[konstant1n13]

В консоли разработчика в хроме не появляются свойства с префиксами

Answer 2

[lkalktus]

Может проще использовать добавление/удаление класса.

Также у transition хорошая поддержка
https://caniuse.com/css-transitions

Answer 3

[profesor08]

Для свойства transition префиксы -webkit-, -o- не нужны.