# Transition

用于页面/组件切换动画

## 代码演示

<CodePreview src="/doc-comp/transition" :height="300">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="动画组件示例">
    <div class="flex">
      <ASelect
        v-model:value="value"
        :options="options"
        placeholder="选择动画"
        :style="{ width: '150px' }"
      />
      <a-button type="primary" class="ml-4" @click="start"> start </a-button>
    </div>
    <component :is="componentsMap[`${value}Transition`]">
      <div v-show="show" class="box"></div>
    </component>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import {
    ExpandTransition,
    ExpandXTransition,
    FadeTransition,
    ScaleRotateTransition,
    ScaleTransition,
    ScrollXReverseTransition,
    ScrollXTransition,
    ScrollYReverseTransition,
    ScrollYTransition,
    SlideXReverseTransition,
    SlideXTransition,
    SlideYReverseTransition,
    SlideYTransition,
  } from '@eciol/share-ui';

  const componentsMap = {
    FadeTransition,
    ScaleTransition,
    SlideYTransition,
    ScrollYTransition,
    SlideYReverseTransition,
    ScrollYReverseTransition,
    SlideXTransition,
    ScrollXTransition,
    SlideXReverseTransition,
    ScrollXReverseTransition,
    ScaleRotateTransition,
    ExpandXTransition,
    ExpandTransition,
  };

  const transitionList = [
    'Fade',
    'Scale',
    'SlideY',
    'ScrollY',
    'SlideYReverse',
    'ScrollYReverse',
    'SlideX',
    'ScrollX',
    'SlideXReverse',
    'ScrollXReverse',
    'ScaleRotate',
    'ExpandX',
    'Expand',
  ];
  const options = transitionList.map((item) => ({
    label: item,
    value: item,
    key: item,
  }));

  const value = ref('Fade');
  const show = ref(true);
  function start() {
    show.value = false;
    setTimeout(() => {
      show.value = true;
    }, 300);
  }
</script>
<style lang="less" scoped>
  .box {
    width: 150px;
    height: 150px;
    margin-top: 20px;
    background-color: rgb(126 170 236);
  }
</style>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <div class="p-4">
    <div class="flex">
      <Select
        :options="options"
        v-model:value="value"
        placeholder="选择动画"
        :style="{ width: '150px' }"
      />
      <a-button type="primary" class="ml-4" @click="start"> start </a-button>
    </div>
    <component :is="`${value}Transition`">
      <div class="box" v-show="show"></div>
    </component>
  </div>
</template>
<script lang="ts" setup>
  import {
    FadeTransition,
    ScaleTransition,
    SlideYTransition,
    ScrollYTransition,
    SlideYReverseTransition,
    ScrollYReverseTransition,
    SlideXTransition,
    ScrollXTransition,
    SlideXReverseTransition,
    ScrollXReverseTransition,
    ScaleRotateTransition,
    ExpandXTransition,
    ExpandTransition,
  } from '@eciol/share-ui';

  const transitionList = [
    'Fade',
    'Scale',
    'SlideY',
    'ScrollY',
    'SlideYReverse',
    'ScrollYReverse',
    'SlideX',
    'ScrollX',
    'SlideXReverse',
    'ScrollXReverse',
    'ScaleRotate',
    'ExpandX',
    'Expand',
  ];
  const options = transitionList.map((item) => ({
    label: item,
    value: item,
    key: item,
  }));

   const value = ref('Fade');
  const show = ref(true);
  function start() {
    show.value = false;
    setTimeout(() => {
      show.value = true;
    }, 300);
  }
</script>
<style lang="less" scoped>
  .box {
    width: 150px;
    height: 150px;
    margin-top: 20px;
    background: pink;
  }
</style>
```