Vue 过渡到弹出菜单

Question

我有一个 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>

Answer 1

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

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

并将 class 绑定到该变量：

:class="{ rotate: isRotated }"

-或-

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

@click="swapUserMenuOpened = !swapUserMenuOpened"

Vue 过渡到弹出菜单

Vue Transition to popup menu

javascript

css

css-transitions

vue.js