Ways to create a rotating effect using CSS and Angular

I'm working with Angular and I have a question: How can I make this icon rotate when I click on it?

<div class="col-lg-1 col-md-4 col-sm-2 col-2 alend-text">
        <i class="pomrgto iconfa fas fa-chevron-circle-right view_cir" title="Ver" aria-hidden="true" (click)="isCollapsed = !isCollapsed"
            [attr.aria-expanded]="!isCollapsed" aria-controls="collapseBasic"></i>
    </div>

The icon has the 

pomrgto iconfa fas fa-chevron-circle-right view_cir
class, and I want it to behave like this:

https://i.sstatic.net/1QXHz.png

When I click the icon, I'd like it to rotate 90 degrees to the right in a smooth animation. Clicking again should return it to its original position.

https://i.sstatic.net/WSRo0.png

I know CSS can achieve this effect, but could you provide some guidance on how I can implement it?

Thank you!

htmlcssangular

Answer №1

Consider trying out this approach:

To start, set the transition property on the arrow as a default. When the icon is clicked, apply a new class to it (let's call it "active"). Next, in your CSS:

.pomrgto {
  transition: transform 1s;
}

.active {
  transform: rotate(90deg);
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exclusive bug discovery: figcaption mysteriously disappearing in Safari browser

Having a CSS dilemma on my personal portfolio website that has me stumped. I’ve been using the and tags to switch from an image to a caption/button upon desktop hover or mobile click. It's working smoothly on all browsers except for Safari iOS. W ...

htmlcssmobile-safaribulmafigcaption

Issues arise when running ng test and ng serve due to the error message "An uncaught exception has happened: Invalid or unexpected token."

I encountered an issue in my Angular8 application where both ng serve and ng test were functioning properly until yesterday. However, today, both commands are failing with an error message. An unexpected exception occurred: Invalid or unrecognized token. ...

angular

Contrasting the disabled class of Bootstrap with the disabled attribute: a deeper dive into

Hey there, I've been using both the disabled class and the disabled attribute, but I'm not sure about the difference between the two. Can someone clarify when to use the class and when to use the attribute? I have a button in my code that I want ...

csshtmltwitter-bootstrap

Troubleshooting Angular Virtual Scrolling and Browser Animation Render Glitch

Encountering issues with browser animations and cdkVirtualScrolling resulting in render bugs. Check out this example for reference: https://stackblitz.com/edit/angular-ivy-nutyca?file=src/app/app.module.ts Upon clicking the "toggle list" button, observe ...

angular

What is the correct method for formatting text spacing?

A few months ago, I dabbled in web design and created a basic website. Now, I'm revisiting it to clean up the layout and make it more visually appealing. I initially used non-breaking spaces to separate paragraphs, but I know that's not optimal. ...

csshtmltext

Error: ASP stylesheet no longer functioning

Why won't my CSS changes apply after I update the file? Even though it was working before, now when I make a change to my CSS file, the updates do not take effect. When viewing the applied styles on IE11 in troubleshoot mode, I am seeing the old sett ...

htmlcssasp.netvisual-studio

What is the method for shifting content as the window is resized to ensure it remains in its original position?

My page features a grid with three div elements. Each div is the size of the viewport, resulting in only one div being visible at a time, while the other two remain outside the view. This makes the grid three times larger than the viewport. When resizing ...

javascriptjqueryhtmlcss

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

javascripthtmlvue.jsvue-componentvuejs3

Uploading profile photos via PHP and storing in a database

I am encountering an issue where the uploaded photo appears on the site but its corresponding name is not being saved in the database. The code successfully uploads the photo to the site but unfortunately, the file name is not being stored in the database. ...

phphtmlmysqlsessionfile-upload

What causes CSS animations to suddenly halt?

Recently, I've been delving into the world of CSS animations and experimenting with some examples. Below is a snippet of code where two event handlers are set up for elements, both manipulating the animation property of the same element. Initially, th ...

javascripthtmlcsscss-animations

View the edited image preview instantly upon selecting the image

I have selected an image and previewed it before submitting the form. However, now I wish to be able to edit the file immediately after selecting it, preview the changes, and then submit the file. <input type ="file" accept="image/*" id="image" name="i ...

javascriptjqueryhtmlajaxlaravel

Angular's OnChanges event is triggering for an Input variable, however the variable remains unchanged

I've encountered a new issue that I'm hoping someone can help me with. I'm working on a simple parent-child component relationship where an Input variable is passed into a ChildComponent. The ChildComponent in question is a bootstrap modal, ...

angulartypescript

Having trouble accessing the ID of a list item using jQuery?

Can you please help me figure out why the code below is not passing the list element ID to ajax correctly: Here's the HTML: <ul id="tree"> <li><a id="1">Finance</a></li> <li><a id="2">ACC& ...

htmlajax

Ivy workspace encountered an error with Angular being undefined: <error>

Recently, I attempted to install Angular on my MacOS terminal by entering the command $ npm install -g @angular/cli Unfortunately, the installation kept failing and the terminal displayed an error message. Subsequently, I tried the command $ sudo npm inst ...

angular

Tips for inserting the final array into the designated div

While working on creating a navigation menu with dropdown and multi-menu functions, I encountered some issues that needed to be addressed. After making several improvements, there is still one area that confuses me. Perhaps I can find the solution here. ...

javascripthtml

Sticky position applied and overlapping with the following container

I'm struggling with the CSS property position: sticky. In my layout, I have three boxes stacked one after another. Each box is styled with the class container from Bootstrap. The middle box, labeled as box-2, needs to be fixed in its position. To ach ...

htmlcssbootstrap-4

Toggle multiple buttons based on the data fetched in the created() lifecycle hook

I have several toggle buttons that should be selected based on the values present in the response obtained through the created() method. <li> <input v-on:click="toggleCheckbox($event)" ...

htmlcssvue.jsvuejs2vuetify.js

jQuery Counter Effect encountering isNaN error when trying to display a number retrieved from a get API object

I am looking to display the numerical data retrieved from an API using JSON. I want to incorporate a counter effect that displays "isNaN" if necessary. The API URL returns an object with the total number saved in data.data. Can anyone assist me with achi ...

javascriptjqueryhtmlcssbootstrap-4

Utilizing CSS for a specific row within the grid-template-areas placement

Hey there, I'm diving into the world of coding and taking on a new project as a beginner. My goal is to recreate Google's Advanced Search page from scratch. Right now, I'm focusing on creating the header section using the power of display: g ...

htmlcsscss-grid

Please indicate a width of 3 characters for the HTML input text

Is there a way to create an HTML text box that can only fit 3 characters exactly? I came across this code online: <input type="text" style="width: 10px; padding: 2px; border: 1px solid black"/> This code creates a text box with a width of 10px ...

htmlcss