Vue 3 离开动画不起作用。过渡问题答案

【问题标题】：Vue 3 Leave animation is not working. Transition issueVue 3 离开动画不起作用。过渡问题
【发布时间】：2021-11-04 01:36:08
【问题描述】：

我有一个关于离开动画的问题。它可以正确输入。父组件：

    <transition name="openedBar">
      <nav-bar v-if="burgerIsOpened" @close="toggleBurger"></nav-bar>
    </transition>

导航栏组件：

<template>
<div class="container--mobile" @click="tryClose">
  <nav>
    <ul>
      <li>
        <router-link to="/auth">Войти в личный кабинет</router-link>
      </li>
      <li>
        <router-link to="/cart">Корзина</router-link>
      </li>
      <li>
        <router-link to="/catalogue">Каталог</router-link>
      </li>
      <li>
        <router-link to="/cactus">Доставка</router-link>
      </li>
      <li>
        <router-link to="/cactus">Программа скидок</router-link>
      </li>
      <li>
        <router-link to="/cactus">О нас</router-link>
      </li>
    </ul>
  </nav>
</div>

父组件的样式：

.openedBar-enter-active {
  // transition: all 1.1s ease;
  animation: modal 1.1s ease-out;
}
.openedBar-leave-active {
  animation: modal 1.1s ease-in reverse;
}

@keyframes modal {
  from {
    opacity: 0;
    transform: translateY(-50px) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

不管我为离开动画设置多少时间，它无论如何都行不通。一旦我关闭汉堡菜单，它就会消失。也许我的解释有点奇怪，因为我只是一个新手，所以提前谢谢你！

【问题讨论】：

标签： javascript vue.js animation transition

【解决方案1】：

如果我没记错的话，v-if 会在为 false 时从 DOM 中删除元素，因为它被删除了，所以它不能动画。也许你可以试试 v-show？

【讨论】：

是的，它也无济于事。你是对的 v-if 从 DOM 中删除一个元素，但是在 vue.js 中删除元素转换之前检查该元素是否必须为离开动画。它对其进行动画处理，并且仅在动画之后元素被删除。我查看了有关我的问题的文档，但没有找到解决方案。

【解决方案2】：

我找到了一个解决方案，在我的子元素 NavBar 中，我有一些 cmets，当我删除它们时一切正常。也许它只是通过 npm run serve 以这种方式工作。因此 - 没有 cmets - 漂亮的动画。

【讨论】：