Javascript Vue-将转换应用于菜单元素

我的vue应用程序中有此scss代码。当

isVisible

属性设置为true时，我试图从左平滑过渡菜单，但我无法应用我定义的过渡，菜单将立即显示。 我在这里做了一个研究，发现了一些有趣的问题，但它们都使用jQuery和css

animation

，所以它们并没有真正的用处。 我不是CSS大师，有什么建议吗

HTML

这是通过

这里有一个例子：

 <transition name="slide">
    <div class="col-12 settings p-3 position-fixed" class="settings" v-if="isVisible">
         <h4>Settings</h4>
    </div>
 </transition>

其实没那么难

看看：

这是用

这里有一个例子：

 <transition name="slide">
    <div class="col-12 settings p-3 position-fixed" class="settings" v-if="isVisible">
         <h4>Settings</h4>
    </div>
 </transition>

其实没那么难

---

看一看：

我认为问题在于，因为您使用的是v-if，所以只有当条件为visible==True时才会渲染元素。这意味着它是在已应用条件“show”类的情况下呈现的，因此没有转换

可以使用v-show指令而不是v-if，这会使元素隐藏但渲染，直到条件为真。（更多信息）

设置

如果您想对转换做更多的工作，我建议您查找vue转换-文档-这允许您在元素的呈现状态期间为元素指定css，即在元素进入和离开时应用什么样式

---

有关如何使用vue transition执行此操作的示例，请参见另一个答案。

我认为问题在于，由于您使用的是v-if，因此仅当条件为Visible==True时才渲染元素。这意味着它是在已应用条件“show”类的情况下呈现的，因此没有转换

可以使用v-show指令而不是v-if，这会使元素隐藏但渲染，直到条件为真。（更多信息）

设置

如果您想对转换做更多的工作，我建议您查找vue转换-文档-这允许您在元素的呈现状态期间为元素指定css，即在元素进入和离开时应用什么样式

---

有关如何使用vue transition执行此操作的示例，请参见另一个答案。

我知道，但我没有考虑过这种方法。我要试一试。通常我只对vue路由器视图使用转换。谢谢你的邀请help@fed3vt即使在文档中，他们使用了html元素，过渡效果也很好，但过渡效果并不像我预期的那样平滑。在一些测试之后，为了获得平滑效果，我修改了CSS，包括一个用于滑入的动画和一个用于滑出的动画。现在一切正常。谢谢你的帮助，我知道，但我没有考虑这样做。我要试一试。通常我只对vue路由器视图使用转换。谢谢你的邀请help@fed3vt即使在文档中，他们使用了html元素，过渡效果也很好，但过渡效果并不像我预期的那样平滑。在一些测试之后，为了获得平滑效果，我修改了CSS，包括一个用于滑入的动画和一个用于滑出的动画。现在一切正常。感谢您的帮助，我已经用

v-show

进行了测试，但不会应用转换。我需要尝试vue transition。我已经用

v-show

进行了测试，但不会应用该转换。我需要尝试vue转换

 <transition name="slide">
    <div class="col-12 settings p-3 position-fixed" class="settings" v-if="isVisible">
         <h4>Settings</h4>
    </div>
 </transition>

.slide-enter-active, .slide-leave-active {
  transition: transform .5s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-200px);
}
.settings {
  top: 0;
  width: 50%;
  height: 100vh;
  background-color: white;
}