In my Vue project, I am exploring the use of transitions to create a popup menu positioned at the bottom of the sidebar. The closed menu displays the user icon, username, and an arrow that should move downwards when closed and rotate 180 degrees when opened. However, the image remains static in the open position without any rotation.
https://i.sstatic.net/sjqEz.png
.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);
}
When the menu opens, the submenus are supposed to slide in from the bottom but currently appear from the right side instead of the declared bottom position using transform: translateY(0) and transform: translateY(10rem).
https://i.sstatic.net/1vIZk.png
.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>