Vue动画与过渡

Vue内置的<Transition>与<TransitionGroup>组件可以方便的为组件插入CSS动画

• v-if,v-show,<component :is="xxx" />组件应用<Transition>包裹
• v-for组件应用<TransitionGroup>包裹

Transition组件

当<Transiton/>没有name属性时

.<name>-enter-from {
  /* 入场动画第一帧 */
}

.<name>-leave-to {
  /* 出场动画末尾帧 */
}

.<name>-enter-active {
  /*  */
}

.<name>-leave-active {
  /*  */
}

<script setup>
  import { ref } from 'vue'

  const visible = ref(true)

  function changeVisible() {
    visible.value = !visible.value
  }
</script>

<template>
  <Transition>
    <h1
      :v-show="visible"
      @click="changeVisible"
    >
      Hello World!
    </h1>
  </Transition>
</template>

<style scoped>

</style>

还可用CSSanimation属性设置动画

.<name>-enter-active {
  animation: enter .5s;
}

@keyframs enter {
  from {
    opcity: 0;
  }
  to {
    opcity: 1;
  }
}

TransitionGroup组件

<script setup>


</script>

<template>
	<TransitionGroup name="list" tag="ul">
  	<li v-for="item in List" :key="item.id">
      {{ item.title }}
    </li>
  </TransitionGroup>
</template>

<style scoped>

</style>