vue.js - 静态元素上的Vue转换不起作用

Question

我正在尝试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;
    }

但是当显示这个组件时，该元素上没有滑动过渡。

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

Answer 1

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

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

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