130、Vue过渡mode属性踩坑----transition

作者: world_7735 | 来源:发表于2020-01-07 11:30 被阅读0次

130、Vue过渡mode属性踩坑----transition
CSS动画相关
CSS之过渡，形变转换及动画
CSS 动画效果
动画
动画
animation动画
CSS Transition
过渡:
css过渡动画浅析

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

首先我们看一下vue中文文档的说法

根据这样的描述我写出了如下代码demo

[

复制代码

](javascript:void(0); "复制代码")

<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