Transition 过渡动画

内置丰富的过渡动画，可以直接作用于 <transition> 组件。

fade 淡入淡出

.a-fade-in

<template>
  <div>
    <a-button @click="show = !show">Click Me</a-button>
    <div style="height: 100px;">
      <transition name="a-fade-in">
        <div v-show="show" class="transition-box">.a-fade-in</div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: true
  })
};
</script>
<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>

显示代码

zoom 缩放

缩放

<template>
  <div>
    <a-button @click="show = !show">Click Me</a-button>
    <div style="height: 100px;">
      <transition name="a-fade-in">
        <div v-show="show" class="transition-box">.a-fade-in</div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show: true
  })
};
</script>
<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>

显示代码

slide 滑入滑出

向上

向下

向左

向右

<template>
  <div class="anim-demo2-wrapper">
    <div>
      <a-button @click="show1 = !show1">向上</a-button>
      <transition name="a-slide-up">
        <div v-show="show1" class="transition-box-demo2">向上</div>
      </transition>
    </div>
    <div>
      <a-button @click="show2 = !show2">向下</a-button>
      <transition name="a-slide-down">
        <div v-show="show2" class="transition-box-demo2">向下</div>
      </transition>
    </div>
    <div>
      <a-button @click="show3 = !show3">向左</a-button>
      <transition name="a-slide-left">
        <div v-show="show3" class="transition-box-demo2">向左</div>
      </transition>
    </div>
    <div>
      <a-button @click="show4 = !show4">向右</a-button>
      <transition name="a-slide-right">
        <div v-show="show4" class="transition-box-demo2">向右</div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show1: true,
    show2: true,
    show3: true,
    show4: true
  })
};
</script>
<style>
.transition-box-demo2 {
  margin-bottom: 10px;
  height: 100px;
  line-height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}
.anim-demo-wrapper {
  display: flex;
  justify-content: space-between;
}
.anim-demo-wrapper > div {
  width: 22%;
}
</style>

显示代码

fold 折叠

居中折叠

向上折叠

向下折叠

向左折叠

向右折叠

<template>
  <div class="anim-demo4-wrapper">
    <div>
      <a-button @click="show0 = !show0">居中折叠</a-button>
      <transition name="a-fold">
        <div v-show="show0" class="transition-box-demo">居中折叠</div>
      </transition>
    </div>
    <div>
      <a-button @click="show1 = !show1">向上折叠</a-button>
      <transition name="a-fold-up">
        <div v-show="show1" class="transition-box-demo">向上折叠</div>
      </transition>
    </div>
    <div>
      <a-button @click="show2 = !show2">向下折叠</a-button>
      <transition name="a-fold-down">
        <div v-show="show2" class="transition-box-demo">向下折叠</div>
      </transition>
    </div>
    <div>
      <a-button @click="show3 = !show3">向左折叠</a-button>
      <transition name="a-fold-left">
        <div v-show="show3" class="transition-box-demo">向左折叠</div>
      </transition>
    </div>
    <div>
      <a-button @click="show4 = !show4">向右折叠</a-button>
      <transition name="a-fold-right">
        <div v-show="show4" class="transition-box-demo">向右折叠</div>
      </transition>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    show0: true,
    show1: true,
    show2: true,
    show3: true,
    show4: true,
  }),
};
</script>
<style>
.transition-box-demo {
  margin-bottom: 10px;
  height: 100px;
  line-height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  box-sizing: border-box;
}
.anim-demo-wrapper {
  display: flex;
  justify-content: space-between;
}
.anim-demo-wrapper > div {
  width: 18%;
}
</style>

显示代码

flip 列表过渡

关于列表过渡，请参考文档：列表过渡

123456789

<template>
  <div>
    <a-button v-on:click="shuffle">Shuffle</a-button>
    <a-button v-on:click="add">Add</a-button>
    <a-button v-on:click="remove">Remove</a-button>
    <transition-group name="a-flip-list" tag="p">
      <span v-for="item in items" v-bind:key="item" class="a-flip-list-item"></span>
    </transition-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      nextNum: 10
    };
  },
  methods: {
    randomIndex: function() {
      return Math.floor(Math.random() * this.items.length);
    },
    add: function() {
      this.items.splice(this.randomIndex(), 0, this.nextNum++);
    },
    remove: function() {
      this.items.splice(this.randomIndex(), 1);
    },
    shuffle: function() {
      this.items.sort(() => Math.random() - 0.5)
    }
  }
};
</script>
<style>
.a-flip-list-item {
  transition: all 1s;
  display: inline-block;
  margin-right: 10px;
}
</style>

显示代码

例子来源：列表的排序过渡

旋转

给任意组件或者 DIV 添加 a-spin 类名，即可使其旋转。

<template>
  <section>
    <a-button class="a-spin">按钮</a-button>
    <a-icon type="loading" class="a-spin" />
    <a-icon type="setting" class="a-spin" />
  </section>
</template>

显示代码

API

属性	说明	类型	默认值
name	<transition> 或者 <transition-group> 组件属性	String	-

name 可选值：

name 值	说明
a-fade-in	淡入淡出
a-zoom	缩放
a-slide-up	向上滑入滑出
a-slide-down	向下滑入滑出
a-slide-left	向左滑入滑出
a-slide-right	向右滑入滑出
a-fold	居中折叠
a-fold-up	向上折叠
a-fold-down	向下折叠
a-fold-left	向左折叠
a-fold-right	向右折叠
a-flip-list	列表过渡，适用于 <transition-group> 组件
a-spin	旋转，注意：直接添加类名即可