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

Question

我正在尝试在 Vue 组件中将非常简单的 transition 应用到 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 attribute:

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

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

Vue transition on static element not working

vue.js

css-animations

vue-transitions