为什么第二个transition标签下需要给div.content元素额外添加v-if判断?

来源：5-6 目录功能实现（目录浮出效果）

慕沐9109337

2020-01-04

我试过把v-if去除掉之后只有最外面一个的transition是生效的,请问其中的原理是什么,谢谢!

  <transition name="fade">
    <div class="slide-content-wrapper" v-show="menuVisible && settingVisible===3">
      <transition name="slide-right">
        <div class="content" v-if="settingVisible===3">
          <div class="content-page-wrapper">
            <div class="content-page"></div>
            <div class="content-page-tab"></div>
          </div>
        </div>
      </transition>
      <div class="content-bg" @click="hideTitleAndMenu()"></div>
    </div>
  </transition>

写回答

1回答

Sam

2020-01-07

已采纳

你好，因为 transition 标签的生效有是条件的，这个条件就是 DOM 发生显示状态的变化，此时，transition 会在包裹的这个 div 消失的时候添加渐入和渐出的 class，我们为这些 class 设置 transition 属性来增加过渡动画，所以如果 v-if 不存在了，那么transition 自然就不能生效了

慕沐9109337

谢谢老师!

2020-01-09

共1条回复

Vue 实战商业级读书Web APP完整项目

Vue全家桶+最新前端技术+前后端分离架构，完整项目流程

1618 学习 · 1951 问题

查看课程

相似问题

老师，添加了EbookSlideBooKmark文件以后书签页并没有显示我设置的标签，是还需要在别的文件里做点什么呀

回答 1

关于8-13节动画的执行问题