vue transition 只有一半的效果

有刁民想害朕
  • 543
回复
阅读 2.1k
2 个回答
✓ 已被采纳

你用的VueJS版本为2.1.4, 小于版本2.1.8 需要把 .fade-leave-to 改为 .fade-leave-active

.fade-enter,
.fade-leave-active {
  height: 0px;
}

下面是我在你的基础上改为2.1.8版本的

https://jsfiddle.net/uLufa45k/3/

你好,我已经解决,亲测有效。
只需要讲 .v-leave-to,.v-leave设置如下即可:

.v-leave-to,.v-leave {
  position: absolute;
  z-index:-10;
}

如果仅仅设置.v-leave-to,那么在过渡时,不会出现半边,但是过渡之初,会闪一瞬间,也可以看到半边,所以再加上.v-leave

你知道吗?

宣传栏