src/utils/util.js
/**
     * Color Change with Material Animations
     *
     * @param $el element
     * @param color new color
     */
Color Change with Material Animations
@param $el element
@param color new color
Color Change with Material Animations @param $el element @param color new color
static materialColorChange($el, color) {
        const container = document.createElement("span"); 
        const animator = document.createElement("span"); 
        container.appendChild(animator); 
        container.className = "animator";
        $el.insertBefore(container, $el.firstChild);
        animator.style.background = color; 
        $el.className += " transition"; 
        setTimeout(() => {
            $el.style.background = color;
            $el.style.backgroundColor = color;
            $el.className = $el.className.replace(" transition", "");
            $el.removeChild(container);
        }, 1250);
    }
static materialColorChange ( $el , color ) { const container = document . createElement ( "span" ) ; const animator = document . createElement ( "span" ) ; container . appendChild ( animator ) ; container . className = "animator" ; $el . insertBefore ( container , $el . firstChild ) ; animator . style . background = color ; $el . className += " transition" ; setTimeout ( ( ) => { $el . style . background = color ; $el . style . backgroundColor = color ; $el . className = $el . className . replace ( " transition" , "" ) ; $el . removeChild ( container ) ; } , 1250 ) ; }
Color Change with Material Animations
 @param $el element
 @param color new color
Color Change with Material Animations @param $el element @param color new color
// Overflow container // Animation space // Prepare and insert in dom // Add background color // Add transition class for animation