Vue过渡mode属性踩坑

最新推荐文章于 2024-01-28 15:59:51 发布

拾玥花开

最新推荐文章于 2024-01-28 15:59:51 发布

阅读量1.7k

点赞数

分类专栏： vue 文章标签： vue

原文链接：https://www.cnblogs.com/lhyxq/p/9643619.html

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

近期学习Vue的过渡效果的时候，mode属性的"in-out"、"out-in"设置了不起作用，官网上的例子让我看了有点迷，问题解决后以此文记录之。

首先我们看一下vue中文文档的说法
在这里插入图片描述
根据这样的描述我写出了如下代码demo

<style type="text/css">
    .on-enter-active,.off-enter-active{
      transition: 2s ease;
    }
    .on-leave-active,.off-leave-active{
      transition: 3s ease;
    }
    .on-enter,.on-leave-to,.off-enter,.off-leave-to{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="test">
  <transition name="on" mode="out-in">
    <button v-if="show">on</button>
  </transition>
   <transition name="off" mode="out-in">
    <button v-if="!show">off</button>
  </transition>
  <button style="margin-top: 100px;" @click="show=!show">切换</button>
</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el:'#test',
    data:{
      show:true
    }
  })
</script>

但是这样的写法，当我点击切换按钮的时候发现根本不起作用，就算设置了mode属性但是on和off的过渡依旧是同时开始的，也就是并没有起作用

在研究了半天后，结合文档前面的多元素的过渡终于解决了问题。

先给出mode属性起作用的代码

<style type="text/css">
    .on-enter-active{
      transition: 2s ease;
    }
    .on-leave-active{
      transition: 3s ease;
    }
    .on-enter,.on-leave-to{
      opacity: 0;
    }
  </style>
</head>
<body>
<div id="test">
  <transition name="on" mode="out-in"><!--mode只适用于一个transition内的同标签切换-->
    <button v-if="show" key="but1">on</button>
    <button v-else key="but2">off</button><!--key为了防止只是修改内容不重新渲染-->
  </transition>

  <button style="margin-top: 100px;" @click="show=!show">切换</button>
</div>

<script src="vue.js"></script>
<script>
  new Vue({
    el:'#test',
    data:{
      show:true
    }
  })
</script>

原来文档中的过渡模式是建立在多组件切换的基础上的，也就是动态组件切换，并且当两个被切换的元素是同种标签的内容时（比如这里都是button），需要给每个元素加key用以区分元素。

否则由于Vue机制的原因，为了性能会使用同一个元素。也就是说你切换时并不会更换掉整个元素，而是替换掉该元素中的内容的值，以此来切换，所以在这里需要添加key

拾玥花开

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue过渡mode属性踩坑

近期学习Vue的过渡效果的时候，mode属性的"in-out"、"out-in"设置了不起作用，官网上的例子让我看了有点迷，问题解决后以此文记录之。首先我们看一下vue中文文档的说法根据这样的描述我写出了如下代码demo<style type="text/css"> .on-enter-active,.off-enter-active{ transition: 2s ease; } .on-leave-active,.off-leave-active{
复制链接

扫一扫