Vue Переход во всплывающее меню
У меня есть проект Vue, в котором я пытаюсь научиться использовать переходы Vue и Vue. Одна из вещей, которые я пробую, — это создание всплывающего меню, которое находится внизу боковой панели.
В закрытом меню отображается только значок пользователя, имя пользователя и стрелка. Эта стрелка должна двигаться вниз, когда меню закрыто. Когда меню открыто, это изображение должно повернуться на 180 градусов. Но изображение остается в открытом положении с самого начала и никогда не вращается при открытии или закрытии меню.
.rotatingImage {
-webkit-transition: -webkit-transform 0.8s ease-in-out;
transition: transform 0.8s ease-in-out;
}
.rotate {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Когда меню открыто, скрытые подменю должны зависать в нижней части экрана. Но эти предметы продолжают поступать справа. Даже жестко я заявил, что они зайдут снизу по transform: translateY(0) и transform: translateY(10rem).
.slide-enter-active,
.slide-leave-active {
transition: 0.4s;
transform: translateY(0);
}
.slide-enter,
.slide-leave-to {
transform: translateY(10rem);
}
<div class = "mt-auto">
<div
class = "w-full flex p-3 cursor-pointer border-t-1 border-b-1 border-blue-sidebarBorder"
@click = "swapUserMenuOpened"
>
<img
src = "@/assets/img/sidebar/user.svg"
alt = "userIcon"
class = "mr-3 w-5"
/>
<p class = "text-lg">{{ userName }}</p>
//THIS IS THE IMG THAT SHOULD ROTATE
<img
src = "@/assets/img/sidebar/arrowDown.svg"
alt = "userIcon"
class = "mr-3 w-3 ml-auto rotatingImage"
:class = "{ rotate: swapUserMenuOpened }"
/>
</div>
<transition name = "slide">
<div v-if = "userMenuOpened">
<router-link
v-for = "item in menuItems"
:key = "item.title"
class = "flex items-center pl-3 cursor-pointer hover-item h-14 transparentBorder mb-0.5"
:to = "item.link"
>
<img
v-bind:src = "require(`@/assets/img/sidebar/${item.icon}`)"
v-bind:alt = "item.icon"
class = "mr-3 w-4"
/>
<p>{{ item.title }}</p>
</router-link>
</div>
</transition>
</div>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Обработчик кликов @click = "swapUserMenuOpened" также используется как переменная :class = "{ rotate: swapUserMenuOpened }". Вместо этого обработчик должен переключать переменную, например:
data() {
return {
isRotated: false
}
},
methods: {
swapUserMenuOpened() {
this.isRotated = !this.isRotated;
}
}
И привяжите класс к этой переменной:
:class = "{ rotate: isRotated }"
-ИЛИ-
Возможно, swapUserMenuOpened является вашим логическим значением (вы не показали свой экземпляр компонента, поэтому мы можем только догадываться), тогда вам просто нужно переключить его при нажатии:
@click = "swapUserMenuOpened = !swapUserMenuOpened"