我想知道如何通过 Vue.js + Vuetify 旋转允许图标

Posted 2023-03-13

【中文标题】我想知道如何通过 Vue.js + Vuetify 旋转允许图标

【英文标题】：I want to know how to rotate allow icon via Vue.js + Vuetify

【发布时间】：2022-01-16 15:39:06

【问题描述】：

现在我想在单击按钮时实现旋转允许图标。从下到上，从上到下，在旋转运动中。

现在我的代码如下

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

现在，当它单击按钮时，箭头图标将旋转并向上转动。 这时候会显示两个图标。

我该如何解决？

【参考方案1】：

这应该会有所帮助：

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/vuetify@1.1.12/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/vuetify@1.1.12/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>