vue.js - Vue.js 侧边栏转换

Question

我在引导行中有一个侧边栏和一个内容，我想为侧边栏的切换设置动画并无缝扩展内容容器，我正在应用这些转换类：

.slide-fade-enter {
  transform: translateX(100%);
  position: relative;
}
.slide-fade-leave, .slide-fade-leave-to {
  transform: translateX(-100%);
  position: absolute;
}

但它在扩展时会闪烁，您可以在这里看到：

https://jsfiddle.net/kd6xpa32/16/

我怎样才能防止这种情况？

Answer 1

看起来你正在用弹性和绝对定位做一些肮脏的事情。我会找到一种方法让侧边栏始终保持绝对（或相对）定位，并找出另一种折叠+展开它的方法。绝对和相对之间的切换导致渲染问题。