静态元素上的Vue转换不起作用答案

【问题标题】：Vue transition on static element not working静态元素上的Vue转换不起作用
【发布时间】：2021-08-08 19:58:23
【问题描述】：

我正在尝试将一个非常简单的transition 应用于 Vue 组件中的 div。元素不依赖于状态或任何东西——它只需要在组件显示时从右侧滑入。由于某种原因，我设置的转换不起作用。

组件在我的页面上显示为：

<MenuSideBar v-if="displayMenu" slide-right :items="menuItems />

在那个组件中，我有：

   <template> 
      <transition name="slide">
                <div v-if="slideRight" class="menu-container">
                    <div  class="menu-inner">
                        <Menu :items="items />
                    </div>
                </div>
            </transition>
   </template>

在我的过渡 CSS 中，我有：

   .menu-container {
        left: 0;
        position: absolute;
        top: 0;
        width: 25vw;
    }
   .slide-enter{
        right: -1000px;
    }

    .slide-enter-active {
        transition: right 0.5s ease;
    }

    .slide-enter-to{
        right: 0;
    }

但是当这个组件显示出来的时候，那个元素上没有滑动过渡。

任何人都可以就我做错了什么提供任何建议吗？

【问题讨论】：

标签： vue.js css-animations vue-transitions

【解决方案1】：

为了完整起见，我发布我的评论作为答案。

您似乎希望在第一次渲染元素时发生过渡。为此，您需要添加appear attribute:

<template> 
    <transition name="slide" appear>
            <div v-if="slideRight" class="menu-container">
                <div  class="menu-inner">
                    <Menu :items="items />
                </div>
            </div>
        </transition>
</template>

【讨论】：