vue元素过渡出现的坑

该文章由 leevare 发布于 ,归类于 Javascript

当使用相同的标签名元素进行过渡时,会发现过渡不起作用,例如如下代码

<div class="trans">
  <transition name="trans" mode="out-in">
    <p v-if="show">123</p>
    <p v-else>465</p>
  </transition>
  <button @click="toggle">toggle</button>
</div>

解决办法是在p标签上添加一个key来区分这两个元素是不一样的

<div class="trans">
  <transition name="trans" mode="out-in">
    <p v-if="show" key="1">123</p>
    <p v-else key="2">465</p>
  </transition>
  <button @click="toggle">toggle</button>
</div>

如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!

相关文章:

说点什么

avatar
300
  Subscribe  
提醒