Vue 过渡到弹出菜单

Posted 2023-02-22

【中文标题】Vue 过渡到弹出菜单

【英文标题】：Vue Transition to popup menu

【发布时间】：2021-04-03 22:14:15

【问题描述】：

我有一个 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"
          
          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"
          
          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:
              class="mr-3 w-4"
            />
            <p> item.title </p>
          </router-link>
        </div>
      </transition>
    </div>

【参考方案1】：

点击处理程序@click="swapUserMenuOpened" 也用作变量:class=" rotate: swapUserMenuOpened "。处理程序应该切换一个变量，例如：

data() 
  return 
    isRotated: false
  
,
methods: 
  swapUserMenuOpened() 
    this.isRotated = !this.isRotated;
  

并将类绑定到该变量：

:class=" rotate: isRotated "

-或-

也许swapUserMenuOpened 是你的布尔值（你没有显示你的组件实例，所以我们只能猜测），那么你只需要在点击时切换它：

@click="swapUserMenuOpened = !swapUserMenuOpened"