Vue - 将过渡应用于菜单元素

Question

我的 vue 应用程序中有这个 scss 代码。 当isVisible属性设置为 true 时，我试图从左侧平滑过渡菜单，但我无法应用我定义的过渡并且菜单将立即出现。 我在这里对 SO 进行了研究，发现了一些有趣的问题，但它们都使用 jQuery 和 css animation ，所以它们并不是很有用。 我不是CSS大师，有什么建议吗？

HTML

    <div class="col-12 settings p-3 position-fixed" :class="{ 'show': isVisible }" ref="settings" v-if="isVisible">
      <h4>Settings</h4>
    </div>

CSS

.settings {
  top: 0;
  width: 50%;
  height: 100vh;
  background-color: white;
  transform: translateX(-100%);
  transition: transform 0.5s ease;
  &.show {
    transform: translateX(0);
    transition: transform 0.5s ease;
  }
}

Answer 1

这是通过<transition>完成的

这里有一个例子：

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

CSS 类

.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;
}

真的没那么难

看看： https ://v2.vuejs.org/v2/guide/transitions.html

Answer 2

我认为问题在于，因为您使用的是 v-if，所以只有在条件 isVisible === True 时才会呈现元素。 这意味着它正在使用已应用的条件“显示”类进行渲染，因此没有过渡。

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

 <div 
  class="col-12 settings p-3 position-fixed" 
  :class="{ 'show': isVisible }" 
  ref="settings" 
  v-show="isVisible">
      <h4>Settings</h4>
  </div>

如果您想对过渡做更多的事情，我建议您查看 vue-transitions -此处的文档 - 这允许您在元素呈现状态期间将 css 分配给元素，即在它进入和离开时应用什么样式。

有关如何使用 vue 转换执行此操作的示例，请参见此处的其他答案。