Vue3过渡动画组件

Transion

组件使用

Transition组件只能拥有单个子组件或子元素，且子组件只能有一个根节点。

该组件用于v-if,v-show或单个component组件

name属性用于定义类名前缀(默认为v)

<template>
  <Transition name="transition">
    <div v-if="visible"></div>
  </Transition>
</template>

过渡动画

对于简单的动画可以使用[前缀]-enter-active类声明一个入场动画, 使用[前缀]-leave-active类声明一个出场动画, 动画结束帧最好与组件展示样式一至

.transition {
  &-enter-active {
    animation: enter 0.3s ease-out;
  }

  &-leave-active {
    animation: enter 0.3s ease-out reverse;
  }
}

@keyframes enter {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

Transition组件不同过程绑定的类名 (vuejs.org)

%active {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

%out {
  opacity: 0;
  transform: translateX(-100%);
}

%in {
  opacity: 1;
  transform: translateX(0);
}

.transition {
  &-enter {
    &-active { @extend %active; }
    &-from { @extend %out; }
    &-to { @extend %in; }
  }

  &-leave {
    &-active { @extend %active; }
    &-from { @extend %in; }
    &-to { @extend %out; }
  }
}

TransitionGroup

TransitionGroup用于为一组组件/元素创建过渡动画,多用于v-for列表(每个子元素都要一个不同的key)

组件使用