CODEWITHSUNDEEP
typescriptvue.jsvuetify.js
Tom
Tom

Reputation: 73

I want to know how to rotate allow icon via Vue.js + Vuetify

Now I want to implement when click the button rotate allow icon. down to up, up to down, within the spinning motion.

now my code is the bellow

<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>

Now, when it click the button, The arrow icon will rotate and turn up ward. At this time, two icons will be displayed for a moment.

How can I solve it?

Upvotes: 1

Views: 7606

Answers (2)

curveball
curveball

Reputation: 4505

Just want to add that as of 2024, Jan it is possible to animate a v-icon component or apply a css-transform to it by using native MD helpers (mdi-...). For instance,

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

Although it would be nice if such props existed for v-icon component out-of-the-box like <v-icon spin ...></v-icon>, but this is not true and such requests have been discarded on the vuetify's github issues tab.

Upvotes: 3

Syed
Syed

Reputation: 16513

This should help:

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/[email protected]/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/[email protected]/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>

Upvotes: 9

Related Questions