Could someone teach me how to implement icon rotation in Vue.js using Vuetify?

I am currently working on adding a feature where the icon rotates when the button is clicked, moving from down to up and vice versa in a spinning motion.

Here is the code I have so far:

<template>

  <v-btn v-on:click="isShow = !isShow">

    <transition name='rotate'>
      <v-icon v-if="!isShow">
        mdi-menu-down
      </v-icon>
    </transition>

    <v-icon v-show="isShow">
      mdi-menu-up
    </v-icon>

  </v-btn>

</template>

<stlyle scoped>
.rotate-leave-active {
    transform: rotate(180deg);
}
.rotate-enter-active {
    transform: rotate(180deg);
}
.rotate-enter .rotate-leave-to {
    transform: rotate(0deg);

}
.rotate-leave .rotate-enter-to {
    transform: rotate(180deg);
}
</style>

Currently, clicking the button causes the arrow icon to rotate and point upwards. However, both icons are briefly displayed simultaneously during this rotation.

Any ideas on how to resolve this issue?

typescriptvue.jsvuetify.js

Answer №1

Here is some helpful code snippet:

new Vue({
  el: '#app',
  data () {
    return {
      isShow: false,
    }
  },
})
.toggleUpDown {
    transition: transform .3s ease-in-out !important;  
}

.toggleUpDown.rotate {
    transform: rotate(180deg);
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bedeefeeff2fde2dbaab5aab5aaa9">[email protected]</a>/dist/vuetify.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6909383928f809fa6d7c8d7c8d7d4">[email protected]</a>/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <div>
      <v-btn @click="isShow = !isShow">
        {{ isShow ? 'Collapse ' : 'Expand ' }}
        <v-icon class="toggleUpDown" :class='{ "rotate": isShow }'>arrow_drop_down</v-icon>
      </v-btn>
    </div>
  </v-app>
</div>

Answer №2

In the year 2024, it has become possible to add animation to a v-icon component or apply CSS transforms to it using native MD helpers (mdi-...). For example,

<v-icon class="mdi-rotate-90" icon="mdi-wrench-cog-outline" size="30"></v-icon> // for 90-degree rotation
<v-icon class="mdi-spin" icon="mdi-wrench-cog-outline" size="30"></v-icon> // for spin animation

It would have been convenient if such properties were available for the v-icon component by default like 

<v-icon spin ...></v-icon>
, but unfortunately, these requests have been rejected on Vueify's GitHub issues page.

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

Unable to display information stored in the Firebase database

I am struggling with a frustrating issue. My goal is to showcase the information stored in the Firebase database in a clear and organized manner, but I'm having trouble achieving this because it's being treated as an object. getData(){ firebas ...

angulartypescriptfirebasefirebase-realtime-database

Take action with Vue.js router

I recently started learning vue.js and I found this code snippet on the official Vuetify website. I am using it to experiment with a pre-designed layout. My question is, how can I achieve the functionality where clicking a button on the side menu loads inf ...

vue.jsroutesvuetify.js

Guide on utilizing async/await in .ts files (Encountering error message: "async functions can only be used when targeting ECMAScript 6 or above")

Initially, my project consisted of only app.js using ExpressJS as the main file with numerous lines of code. My development manager instructed me to refactor the code and move some functions into a separate .ts file (transition from JavaScript to TypeScrip ...

javascriptnode.jstypescriptexpresses6-promise

The axios response cannot be awaited in Jest unit tests

While unit testing my Vue-Electron project with Jest, I encountered an issue where a chain of events triggered by a fake button click was not functioning as expected. In the midst of this chain, an axios request was made to a server to retrieve data, but t ...

node.jsvue.jselectronjestjsaxios

What is the best method for transitioning to a new page in React Native using Ignite Bowser?

Recently I ventured into the world of React Native with Ignite Bowser. My current project involves building a React Native app using Ignite Bowser. At the start of my app, there's a welcoming screen that pops up. It features a 'continue' bu ...

androidtypescriptreact-native

Using multiple where conditions in TypeORM

SELECT * FROM clients WHERE preferred_site = 'techonthenet.com' AND client_id > 6000; Is there a way to execute this in the typeorm query builder? ...

sqltypescripttypeorm

Allow for an optional second parameter in Typescript type definition

Here are two very similar types that I have: import { VariantProps } from "@stitches/core"; export type VariantOption< Component extends { [key: symbol | string]: any }, VariantName extends keyof VariantProps<Component> > = Extra ...

typescripttypes

What is the method for retrieving the dev server proxy target from within the application?

Currently, I am utilizing an iframe within the application. However, I am facing a challenge in proxying its src via the development server. As a workaround, I have implemented the following code: const origin = process.env.NODE_ENV === 'production&ap ...

vue.jswebpackproxywebpack-dev-serverdevserver

Unidentified Controller Scope in Angular and TypeScript

I am struggling with my Angular 1.5 app that uses Typescript. Here is a snippet of my code: mymodule.module.ts: angular.module('mymodule', []).component('mycomponent', new MyComponent()); mycomponent.component.ts export class MyCont ...

angularjstypescriptpartials

Using Vue JS, can I include a route parameter (:id) in an i18N translation?

Consider this sample Vue JS template: <template> <b-container> <b-row> <b-col> <div> {{$t("competence.*web-developer*.title1")}} </div> </b-col> </b ...

vue.jsvue-routervue-i18n

Execute a function when a button is pressed in a React application

Currently, I am dynamically generating some HTML and have a requirement for certain "events" to trigger an onclick function. The technology stack I am using for this project involves React and TypeScript. My initial approach is as follows: function add_ev ...

htmlreactjstypescript

Angular Inner Class

As a newcomer to Angular, I have a question about creating nested classes in Angular similar to the .NET class structure. public class BaseResponse<T> { public T Data { get; set; } public int StatusCo ...

javascript.netangulartypescriptclass

Local font not applying styles in Tailwind CSS

I integrated the Gilroy font into my application, but I am facing issues with tailwindcss not being able to style the text properly. The font appears too thin in all elements such as paragraphs and headers. Here is the file structure for reference: https: ...

typescriptnext.jstailwind-css

After initializing a Vue instance, the textContent of various HTML elements is obtained

Before and after creating a Vue instance over an element, different values of textContent are retrieved. Click here to see the issue in action To observe the varying outputs, check the console. The white space characters are being stripped off by the Vu ...

vue.jsaemaem-core-wcm-components

The onChange event does not work as expected for Select controls

I am facing an issue with my common useForm.tsx file when handling the onChange event for select controls. The error message I encounter is displayed below. Does anyone have any suggestions on how to resolve this? Error: Type '(e: ChangeEvent<HTM ...

typescriptnext.js

How to Generate a Unique URL in Angular 7 Using Typescript

I'm struggling to display or download a .pdf file in my Angular 7 project due to issues with window.URL.createObjectURL. Here's the code snippet I've written: this.userService.getFile(report.id).subscribe( res => { console.log(res) ...

angulartypescripturlangular7

The power of negative multiplication in TypeScript and React

I am working with a state variable called sortDirection const [sortDirection, setSortDirection] = useState<1 | -1>(1); My goal is to allow a button to toggle the state variable like this setSortDirection(sortDirection * -1); However, I encounter a ...

reactjstypescript

Sometimes, it feels like TypeScript's async await does not actually wait for the task to complete before moving on

Recently, I have been transitioning to using the async await pattern more frequently instead of the traditional Promise syntax because it can help in keeping the code structure cleaner. After some experimentation, I felt like I had a good grasp on how to u ...

javascriptangulartypescriptasync-await

Is there a way to pre-load images from component B within component A using Vue?

In a scenario where I have two Vue files, A.vue and B.vue, the issue arises when navigating from A to B. B contains numerous images fetched from Firebase realtime database, resulting in slow loading times upon first visit. To address this, I aim to preload ...

javascriptasynchronousvue.jspreload

Generating a 3D face using three coordinates in Three.js

Currently, I have implemented code that allows me to load, render, and display a STL object using Vue.js and Three.js. My goal now is to replace the currently selected plane with a new face. I've managed to extract the 3 vertices of the clicked-on fac ...

javascriptvue.jsthree.js