vue.js之过渡动画

vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中，在通过css修改样式即可满足需求
命名该动画的样式使用 .v-enter等过渡类名来定义动画 如<transition name="tr"></transition> 的类名为 .tr-enter
vue一共提供了6个过渡类名，官方文档的解释有一些拗口，我决定以点击显示底部弹框为例解释6个类名的状态

1. v-enter: 弹框显示前的样式，过渡的开始状态, 也就是动画还没开始前，动画的起始位置
2. v-enter-active 动画生效的状态，从底部过渡到页面的过程
3. v-enter-to 动画执行完的结束状态，也就是弹出结束后显示在页面的样式
4. v-leave 隐藏元素，离开动画的开始状态，元素消失开始的样式
5. v-leave-active 隐藏元素过程中，离开动画的生效动态即离开的过程，从上到下滑
6. v-leave-to 隐藏元素完成，离开动画的结束状态(此时v-leave的样式被删除)

用通俗的语句解释完6个状态后开始书写样式，将点击显示/点击隐藏 两个动作分解

// 点击显示弹窗的动画
// 弹框出现前的样式
.slide-enter{
   transform: translate3d(0,100%,0)
}
// 从下往上弹出的过程，即过渡效果的样式
.slide-enter-active{
    transition:all 0.5s
}
// 弹框弹出的动画结束,即显示在页面底部
.slide-enter-to{
    transform: translate3d(0,0,0)
}
// 点击隐藏弹框的动画
// 弹框隐藏前的样式，此时在页面底部
.slide-leave{
    transform: translate3d(0,100%,0)
}
// 弹框从上往下滑的过渡效果
.slide-leave-active{
    transition:all 0.5s
}
// 弹框滑出页面底部即隐藏:这一步骤的样式可以忽略不写，因为在slide-leave-to这个状态时v-leave的样式已经被删除 v-show为false弹框隐藏,弹框隐藏的样式
.slide-leave-to{
     transform: translate3d(0,100%,0)
}
    

有时候过渡元素时需要条件渲染，如果渲染的两个标签是相同的，需要用key唯一值来区别。代码如下

<transition>
    <div>
        <button v-if="flag" :key="submit">submit</button>
        <button v-else :key="cancel">cancel</button>    
    </div>    
</transition>

假如在这个基础下增加一个需求，先隐藏submit按钮再显示cancel，即离开和开始的动画同时进行。可以使用过渡模式来解决问题。
mode="out-in" 当前元素先进行过渡，过渡结束后新元素再进行过渡
mode="in-out" 新元素先进行过渡，过渡结束当前元素再过渡

过渡列表

除了单个标签过渡外，在实际开发中肯定还会涉及到列表过渡。例如往一个列表添加或删除一条数据。
例如下图，动态添加或删除一个数组中的数字，插入的数字和原有的都要有一个过渡的动画。在这种情况下需要使用<transition-group><transition-group>过渡组件，具体代码如下

组件的结构如下

<template>
    <div class="number-wrapper">
        <button @click="add">add</button>
        <button @click="remove">remove</button>
        <div class="list">
            <transition-group name="fade">
                //注意，在transition-group下:key的值不能够是index
                <span v-for="(item) in list" :key="item" class="item">{{item}}</span>
            </transition-group>
        </div>
    </div>
</template>

js代码

<script>
export default {
  data () {
    return {
      list: [1]
    }
  },
  methods: {
    add () {
      // 获取当前数组长度
      let num = this.list.length
      // 获取随机位置
      let index = Math.floor(Math.random() * num)
      // 添加下一个数字到随机位置
      this.list.splice(index, 0, num + 1)
    },
    remove () {
      let num = this.list.length
      let index = Math.floor(Math.random() * num)
      //随机移除一个数字
      this.list.splice(index, 1)
    }
  }
}
</script>

css部分

.fade-enter,
    .fade-leave-to
     opacity:0
     transform:translateY(20px)
    .fade-leave-active
     position: absolute
    .item
        margin-right: 10px
        display: inline-block
        transition: all 0.5s