v-if与v-show引起的过渡 here

移动过渡

及不再使用v-if或v-show来隐藏和显示组件，而是改变组件位置变换过程中的过渡

示例

<script setup lang="ts">
import { ref } from 'vue'
import _ from 'lodash';

const handleClick = () => {
  arr.value = _.shuffle(arr.value)
}
const arr = ref(
  Array.apply(null, { length: 81 } as { id: number; val: number }[]).map(
    (item, index) => {
      return {
        id: index,
        val: (index % 9) + 1,
      }
    }
  )
)
</script>

<template>
  <el-button size="small" type="primary" @click="handleClick">显隐</el-button>
  <transition-group class="wraps" tag="div" move-class="move">
    <div class="item" v-for="item in arr" :key="item.id">{{ item.val }}</div>
  </transition-group>
</template>

<style lang="scss" scoped>
.move {
  transition: all 1s;
}
.wraps {
  display: flex;
  flex-wrap: wrap;
  width: calc(25px * 10);
  .item {
    width: 25px;
    height: 25px;
    line-height: 25px;
    border: solid 1px #ccc;
    text-align: center;
  }
}
</style>

状态过渡

如颜色过渡，数组变化过渡等

数字过渡示例

使用gsap动画库

<script setup lang="ts">
import { reactive, watch } from 'vue'
import gsap from 'gsap'
const num = reactive({
  current: 0,
  add: 0
})

watch(() => num.current, (val) => {
  gsap.to(num, {
    duration: 1,
    add: val
  })
})

</script>

<template>
  <input v-model="num.current" type="number" step="20">
  <h3>{{ num.add.toFixed(0) }}</h3>
</template>