Vue Transition 动画小记

Transition 单组件切换动画

Vue 使用 JSX 做单个组件 if 切换时，两个节点相同（标签相同或 Vue 组件对象相同）会导致过渡失效

// Hello.vue
<template>
  <span class="hello"><slot></slot></span>
</template>

// TransitionDemo.tsx
import { defineComponent, ref, Transition } from 'vue'
import Hello from './Hello.vue'

const TransitionDemo = defineComponent({
  name: 'TransitionDemo',
  setup() {
    const visible = ref(false)
    return () => [
      <button onClick={() => visible.value = !visible.value}>点击切换</button>,
      <Transition name="fade" mode="out-in">
        {visible.value ? <span>hi</span> : <span>hello</span>}
      </Transition>,
      <Transition name="fade" mode="out-in">
        {visible.value ? <Hello>嗨</Hello> : <Hello>你好</Hello>}
      </Transition>
    ]
  }
})

export default TransitionDemo

解决办法就是添加不同的 key

<Transition name="fade" mode="out-in">
  {visible.value ? <span key="1">hi</span> : <span key="2">hello</span>}
</Transition>

或者使用 template 模板，在 template 模板中不会出现这个问题

<template>
  <button @click="visible = !visible">点击切换</button>
  <Transition name="fade" mode="out-in">
    <span v-if="visible">hi</span>
    <span v-else>hello</span>
  </Transition>
</template>

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

const visible = ref(false)
</script>

Transition 动画过渡时放大/缩小定位

在 Transition 动画做放大/缩小过渡时需要获取定位，使用 offseLeft/offsetTop 可以获取更准确的定位，从而防止因为动画导致的定位不准确。