現在我想在單擊按鈕時實作旋轉允許圖示。從下到上，從上到下，在旋轉運動中。
現在我的代碼是波紋管
<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>
現在，當它單擊按鈕時，箭頭圖示將旋轉并向上移動。這時候會暫時顯示兩個圖示。
我該如何解決？
uj5u.com熱心網友回復：
這應該有幫助：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/380338.html
標籤：打字稿 Vue.js Vuetify.js