Vue 过渡到弹出菜单答案

【问题标题】：Vue Transition to popup menuVue 过渡到弹出菜单
【发布时间】：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"
          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 css vue.js css-transitions

【解决方案1】：

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

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

并将类绑定到该变量：

:class="{ rotate: isRotated }"

-或-

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

@click="swapUserMenuOpened = !swapUserMenuOpened"

【讨论】：