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

Question

我试过把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>

Answer 1

Sam 2020-01-07 21:46:12

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

• 提问者 慕沐9109337 #1

  谢谢老师!