vuejs fade-enter-active 过渡动画没有效果

在实现VueJS仿饿了么页面的过渡效果时,遇到v-if和v-show导致的动画不一致问题。通过官方文档和源码分析,发现v-if直接切换display属性,而v-show在DOM中保留元素,导致过渡效果失效。最终理解了v-if和v-show在条件渲染中的差异。
摘要由CSDN通过智能技术生成

在做一个仿饿了么外卖页面效果时,有一个详情页面显示隐藏的过渡效果。

在折腾了半天后终于发现,他那个效果是用vue1.0写的,在我这2.5版本的vue面前完全不顶用。找到问题就好办了,赶紧上官网搬了一段救兵回来。

在需要过渡效果的元素外面套一层:
<transition name='fade'></transition>

然后添加样式:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

很简单嘛,效果立竿见…… 诶,不对,“影子”呢?怎么感觉显示和消失的速率不一样啊,为了更明显的感觉,我把时间改成了3s,这下立马露馅儿了。

显示的时候立刻就出现了,消失时确实是按照了3s的设置缓慢消失。

逗我玩儿呐!把官方文档掀的底朝天了都没看出毛来,又搜了一堆的博客,也没有头绪。这眼看着就1点半了,困意来袭,咋办明天继续么?

在我又一次把所有代码拆成单个样式后,不知道哪根筋抽了下,会不会是显示控制的问题?仔细对比了官方源码:

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <tr
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值