使用 Vue 3 动画过渡实现顺畅的菜单切换：打造引人注目的用户体验

vue.js

2024-03-25 08:25:10

使用 Vue 3 动画过渡实现流畅菜单切换

问题概述

在 Vue 3 中创建菜单时，我们希望菜单在打开和关闭时具有流畅的动画效果。然而，如果仅为菜单的进入应用过渡，而离开时没有过渡，就会导致菜单只能滑入，而不能滑出。此外，遮罩层也应该具有动画效果，例如淡入和淡出。

解决方案

为了解决这个问题，我们需要同时为菜单进入和离开添加动画过渡，并为遮罩层添加额外的淡入淡出过渡。

步骤如下：

为菜单离开添加过渡 ：使用<transition name="slide">将离开动画应用到菜单容器上。
为遮罩层添加淡入淡出过渡 ：使用<transition name="fade">将淡入淡出动画应用到遮罩层上。

代码示例

<!-- 添加 "scoped" 属性以限制 CSS 仅适用于此组件 -->
<style scoped>
  span {
    cursor: pointer;
  }
</style>

<template>
  <div>
    <button @click="cartToggle">Toggle</button>
  </div>
  <div>
    <Child
      :visible="cartVisible"
      @update:visible="cartToggle"
      v-show="cartVisible"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import Child from "./Child.vue";

const cartVisible = ref(false);
const cartToggle = () => {
  cartVisible.value = !cartVisible.value;
};
</script>

<script setup lang="ts">
import { toRefs, watchEffect, onBeforeUnmount } from "vue";

const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
});

const { visible } = toRefs(props);

const emit = defineEmits(["update:visible"]);

const hideCartBar = () => {
  emit("update:visible", false);
};

watchEffect(() => {
  document.body.style.overflow = visible.value ? "hidden" : "auto";
  document.body.style.paddingRight = visible.value ? "15px" : "0px";
});

onBeforeUnmount(() => {
  document.body.style.overflow = "auto";
  document.body.style.paddingRight = "0px";
});
</script>

<template>
  <div class="cartbar">
    <div class="cartbar-wrapper">
      <transition name="fade">
        <div
          v-show="props.visible"
          class="cartbar-overlay"
          @click="hideCartBar"
        ></div>
      </transition>
      <transition name="slide">
        <div v-show="props.visible" class="cartbar-container">
          <div class="cartbar__header">
            <h2>Menu</h2>
            <span @click="hideCartBar" class="cursor-pointer">Close</span>
          </div>
        </div>
      </transition>
      <transition name="slide">
        <div v-show="!props.visible" class="cartbar-container">
          <div class="cartbar__header">
            <h2>Menu</h2>
            <span @click="hideCartBar" class="cursor-pointer">Close</span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<style scoped>
  /* transition */
  /* transition */
  .fade-enter-from,
  .fade-leave-to {
    opacity: 0;
  }

  .fade-enter-to,
  .fade-leave-from {
    opacity: 1;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 500ms;
  }

  .slide-enter-from,
  .slide-leave-to {
    transform: translateX(100%);
  }

  .slide-enter-to,
  .slide-leave-from {
    transform: translateX(0);
  }

  .slide-enter-active,
  .slide-leave-active {
    transition: transform 500ms;
  }

  /* cartbar */
  .cursor-pointer {
    cursor: pointer;
  }
  .cartbar-wrapper {
    transition: visibility 0s 0s;
    z-index: 1300;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    padding-left: calc(4px * 9);
  }

  .cartbar-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 1;
    cursor: pointer;
  }
  .cartbar-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 460px;
    height: 100%;
    overflow: hidden;
    margin-left: auto;
    padding: calc(4px * 7);
    background-color: #f4f2f1;
    color: #706b5f;
  }
</style>