I am working on a navigation toggle button for a website and I want to switch between two Material Design icons, menu and close, when the user clicks the button. Currently, the icon changes instantly without any animation. I would like to add a smooth transition effect so that the change between the two icons looks more visually appealing.

At the moment I am using Material Icons like this:

let icon = document.getElementById("icon"); icon.addEventListener("click", function() { icon.classList.add("animate"); setTimeout(function() { if (icon.innerText === "menu") { icon.innerText = "close"; } else { icon.innerText = "menu"; } icon.classList.remove("animate"); }, 200); }); body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial; } /* Icon Style */ #icon { font-size: 60px; cursor: pointer; transition: transform 0.4s ease, opacity 0.3s ease; } /* Animation class */ .animate { transform: rotate(180deg) scale(1.2); opacity: 0.6; } <!-- Material Icons --> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <span id="icon" class="material-icons">menu</span>

Yogi's user avatar

Yogi

7,5793 gold badges34 silver badges42 bronze badges

VIVEK TAWARE's user avatar

New contributor

VIVEK TAWARE is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

1

The code you shared does not contain any Angular code. Kindly refer the Angular Docs and get familiar with Angular features.

Angular.dev - Overview

We can use a signal Boolean called toggle and toggle this to add/remove the animate class and perform this effect.

TS:

import { Component, signal } from '@angular/core'; @Component({ selector: 'app-root', template: ` <span id="icon" class="material-icons" [class.animate]="toggle()" (click)="toggle.set(!toggle())"> {{toggle() ? 'menu' : 'close'}} </span> `, }) export class App { toggle = signal(false); }

Stackblitz Demo

Naren Murali's user avatar

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.